<div [@routerTransition]>
 
    <div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor">
        <div class="kt-subheader kt-grid__item">
            <div [class]="containerClass">
                <div class="kt-subheader__main">
                    <h3 class="kt-subheader__title">
                        <span>{{"VisualSettings" | localize}}</span>
                    </h3>
                    <span class="kt-subheader__separator kt-subheader__separator--v"></span>
                    <span class="kt-subheader__desc">
                        {{"UiCustomizationHeaderInfo" | localize}}
                    </span>
                </div>
            </div>
        </div>

        <div [class]="containerClass + ' kt-grid__item kt-grid__item--fluid'">
            <div class="kt-portlet kt-portlet--mobile">
                <div class="kt-portlet__body">
                    <tabset type="pills">
                        <tab *ngFor="let themeSetting of themeSettings"
                            [active]="themeSetting.theme == currentThemeName">
                            <ng-template tabHeading>
                                <img [src]="'/assets/common/images/metronic-themes/' + themeSetting.theme +  '.png'"
                                    width="150" />
                                <span class="theme-name">{{getLocalizedThemeName(themeSetting.theme)}}</span>
                            </ng-template>

                            <default-theme-ui-settings *ngIf="themeSetting.theme == 'default'"
                                [settings]="themeSetting"></default-theme-ui-settings>
                            <theme2-theme-ui-settings *ngIf="themeSetting.theme == 'theme2'" [settings]="themeSetting">
                            </theme2-theme-ui-settings>
                            <theme3-theme-ui-settings *ngIf="themeSetting.theme == 'theme3'" [settings]="themeSetting">
                            </theme3-theme-ui-settings>
                            <theme4-theme-ui-settings *ngIf="themeSetting.theme == 'theme4'" [settings]="themeSetting">
                            </theme4-theme-ui-settings>
                            <theme5-theme-ui-settings *ngIf="themeSetting.theme == 'theme5'" [settings]="themeSetting">
                            </theme5-theme-ui-settings>
                            <theme6-theme-ui-settings *ngIf="themeSetting.theme == 'theme6'" [settings]="themeSetting">
                            </theme6-theme-ui-settings>
                            <theme7-theme-ui-settings *ngIf="themeSetting.theme == 'theme7'" [settings]="themeSetting">
                            </theme7-theme-ui-settings>
                            <theme8-theme-ui-settings *ngIf="themeSetting.theme == 'theme8'" [settings]="themeSetting">
                            </theme8-theme-ui-settings>
                            <theme9-theme-ui-settings *ngIf="themeSetting.theme == 'theme9'" [settings]="themeSetting">
                            </theme9-theme-ui-settings>
                            <theme10-theme-ui-settings *ngIf="themeSetting.theme == 'theme10'"
                                [settings]="themeSetting"></theme10-theme-ui-settings>
                            <theme11-theme-ui-settings *ngIf="themeSetting.theme == 'theme11'"
                                [settings]="themeSetting"></theme11-theme-ui-settings>
                            <theme12-theme-ui-settings *ngIf="themeSetting.theme == 'theme12'"
                                [settings]="themeSetting"></theme12-theme-ui-settings>
                        </tab>
                    </tabset>
                </div>
            </div>
        </div>
    </div>
</div>