<tabset *ngIf="settings">
    <tab heading="{{'UiCustomization_Header' | localize}}">
        <div class="kt-form">
            <form id="HeaderSettingsForm">
                
                <div class="form-group row">
                    <h5 class="col">{{'UiCustomization_HeaderSkin' | localize}}</h5>
                    <div class="col-lg-12">
                        <select id="HeaderSkin"
                                name="HeaderSkin"
                                class="form-control w-25"
                                [(ngModel)]="settings.header.headerSkin">
                            <option value="light">{{"UiCustomization_Light" | localize}}</option>
                            <option value="dark">{{"UiCustomization_Dark" | localize}}</option>
                        </select>
                    </div>
                </div>

                <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>

                <div class="form-group row">
                    <h5 class="col">{{'UiCustomization_Mobile' | localize}}</h5>
                    <div class="col-lg-12">
                        <label class="kt-checkbox">
                            <input type="checkbox"
                                   name="MobileFixedHeader"
                                   [(ngModel)]="settings.header.mobileFixedHeader">
                            {{"UiCustomization_MobileFixedHeader" | localize}}
                            <span></span>
                        </label>
                    </div>
                </div>
            </form>
        </div>
    </tab>

    <tab heading="{{'UiCustomization_SubHeader' | localize}}">
        <div class="kt-form">
            <form id="LayoutSettingsForm">
                <div class="form-group row">
                    <h5 class="col">{{"UiCustomization_SubHeader" | localize}}</h5>
                    <div class="col-lg-12">
                        <label class="kt-checkbox">
                            <input type="checkbox"
                                   name="FixedSubHeader"
                                   [(ngModel)]="settings.subHeader.fixedSubHeader">
                            {{"UiCustomization_MobileFixedHeader" | localize}}
                            <span></span>
                        </label>
                    </div>
                </div>

                <div class="form-group row">
                    <h5 class="col">{{"UiCustomization_SubHeaderStyle" | localize}}</h5>
                    <div class="col-lg-12">
                        <select id="SubHeaderStyle"
                                name="SubHeaderStyle"
                                class="form-control w-25"
                                required
                                [(ngModel)]="settings.subHeader.subheaderStyle">
                            <option value="transparent">{{"UiCustomization_SubHeaderStyle_Transparent" | localize}}</option>
                            <option value="solid">{{"UiCustomization_SubHeaderStyle_Solid" | localize}}</option>
                        </select>
                    </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_MenuSkin' | localize}}</h5>
                    <div class="col-lg-12">
                        <select id="AsideSkin"
                                name="AsideSkin"
                                class="form-control w-25"
                                [(ngModel)]="settings.menu.asideSkin">
                            <option value="light">{{"UiCustomization_Light" | localize}}</option>
                            <option value="dark">{{"UiCustomization_Dark" | localize}}</option>
                        </select>
                    </div>
                </div>

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

                <div class="form-group row">
                    <div class="col-lg-12">
                        <label class="kt-checkbox col-lg-12">
                            <input type="checkbox"
                                   name="AllowAsideMinimizing"
                                   [(ngModel)]="settings.menu.allowAsideMinimizing"
                                   (ngModelChange)="allowAsideMinimizingChange($event)">
                            {{"UiCustomization_AllowAsideMinimizing" | localize}}
                            <span></span>
                        </label>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-lg-12">
                        <label class="kt-checkbox col-lg-12">
                            <input type="checkbox" name="DefaultMinimizedAside"
                                   [(ngModel)]="settings.menu.defaultMinimizedAside"
                                   [(disabled)]="!settings.menu.allowAsideMinimizing">
                            {{"UiCustomization_DefaultMinimizedAside" | localize}}
                            <span></span>
                        </label>
                    </div>
                </div>

                <div class="form-group row">
                    <h5 class="col">{{'UiCustomization_SubmenuToggle' | localize}}</h5>
                    <div class="col-lg-12">
                        <select id="SubmenuToggle"
                                name="SubmenuToggle"
                                class="form-control w-25"
                                [(ngModel)]="settings.menu.submenuToggle">
                            <option value="false">{{"UiCustomization_SubmenuToggle_Accordion" | localize}}</option>
                            <option value="true">{{"UiCustomization_SubmenuToggle_Dropdown" | localize}}</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
    </tab>

    <tab heading="{{'UiCustomization_Footer' | localize}}">
        <div class="kt-form">
            <form id="FooterSettingsForm">
                <div class="form-group row">
                    <h5 class="col">{{'UiCustomization_Footer' | localize}}</h5>
                    <div class="col-lg-12">
                        <label class="kt-checkbox col-lg-12">
                            <input type="checkbox"
                                   name="FixedFooter"
                                   [(ngModel)]="settings.footer.fixedFooter">
                            {{"UiCustomization_FixedFooter" | 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-secondary btn-brand btn-pill">
        {{"UseSystemDefaults" | localize}}
    </button>
</div>
