<tabset *ngIf="settings">
    <tab heading="{{'UiCustomization_Layout' | localize}}">
        <div class="kt-form">
            <form id="LayoutSettingsForm">
                <div class="form-group row">
                    <h5 class="col">{{"UiCustomization_LayoutType" | localize}}</h5>
                    <div class="col-lg-12">
                        <select id="LayoutType"
                                name="LayoutType"
                                class="form-control w-25"
                                [(ngModel)]="settings.layout.layoutType">
                            <option value="fluid">{{"UiCustomization_Fluid" | localize}}</option>
                            <option value="fixed">{{"UiCustomization_Fixed" | localize}}</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </tab>
    
    <tab heading="{{'UiCustomization_Header' | localize}}">
        <div class="kt-form">
            <form id="HeaderSettingsForm">
                <div class="form-group row">
                    <h5 class="col">{{"UiCustomization_Desktop" | localize}}</h5>
                    <div class="col-lg-12">
                        <label class="kt-checkbox">
                            <input type="checkbox"
                                   name="DesktopFixedHeader"
                                   [(ngModel)]="settings.header.desktopFixedHeader">
                            {{"UiCustomization_DesktopFixedHeader" | localize}}
                            <span></span>
                        </label>
                    </div>
                </div>
            </form>
        </div>
    </tab>

    <tab heading="{{'UiCustomization_Menu' | localize}}">
        <div class="kt-form">
            <form id="MenuSettingsForm">
                <div class="form-group row">
                    <h5 class="col">{{"UiCustomization_Menu" | localize}}</h5>
                    <div class="col-lg-12">
                        <label class="kt-checkbox">
                            <input type="checkbox"
                                   name="FixedAside"
                                   [(ngModel)]="settings.menu.fixedAside">
                            {{"UiCustomization_FixedMenu" | localize}}
                            <span></span>
                        </label>
                    </div>
                </div>
            </form>
        </div>
    </tab>
</tabset>

<div class="mt-4">
    <button *ngIf="'Pages.Administration.UiCustomization' | permission"
            (click)="updateDefaultUiManagementSettings()"
            class="btn btn-primary btn-brand btn-pill">
        <i class="fa fa-save"></i>
        {{"SaveAsSystemDefault" | localize}}
    </button>

    <button *ngIf="!('Pages.Administration.UiCustomization' | permission)"
            (click)="updateUiManagementSettings()"
            class="btn btn-primary btn-brand btn-pill">
        <i class="fa fa-save"></i>
        {{"Save" | localize}}
    </button>

    <button *ngIf="!('Pages.Administration.UiCustomization' | permission)"
            (click)="useSystemDefaultSettings()"
            class="btn btn btn-secondary btn-hover-brand btn-brand btn-pill">
        {{"UseSystemDefaults" | localize}}
    </button>
</div>
