<div>
  <mat-list>
    <h1 mat-subheader>{{ 'settings.genernal.theme' | translate }}</h1>
    <!--<ul class="theme-list">
      <li
        class="theme-box default"
        (click)="onSelectedTabChange('theme-default')"
      ></li>
      <li
        class="theme-box lgRed"
        (click)="onSelectedTabChange('theme-lgRed')"
      ></li>
    </ul>-->
    <mat-list-item class="theme-select">
      <mat-tab-group
        #themeTabGroup
        mat-stretch-tabs
        animationDuration="0ms"
        (selectedTabChange)="onSelectedTabChange($event)"
        fxLayout="row"
        class="theme-list"
      >
        <mat-tab>
          <ng-template mat-tab-label class="theme-item">
            <div class="theme-box default-theme"></div>
            <div class="theme-name">
              {{ 'settings.genernal.defaultTheme' | translate }}
            </div>
          </ng-template>
        </mat-tab>
        <mat-tab>
          <ng-template mat-tab-label class="theme-item">
            <div class="theme-box lg-red-theme"></div>
            <div class="theme-name">Red</div>
          </ng-template>
        </mat-tab>
      </mat-tab-group>
    </mat-list-item>

    <mat-divider></mat-divider>

    <h1 mat-subheader>{{ 'settings.genernal.application' | translate }}</h1>
    <mat-list-item>
      <mat-checkbox
        [checked]="setting.autoLaunch"
        (change)="onChangeAutoStart($event)"
        >{{ 'settings.genernal.autoStartOnBoot' | translate }}</mat-checkbox
      >
    </mat-list-item>
    <mat-list-item>
      <mat-checkbox
        [checked]="setting.startupHideWindow"
        (change)="onChangeStartupHideWindow($event)"
        >{{ 'settings.genernal.autoHideWindow' | translate }}</mat-checkbox
      >
    </mat-list-item>
    <!-- <mat-list-item>
      <mat-checkbox
        [checked]="setting.continueRunWhenClose"
        (change)="onChangeContinueRunWhenClose($event)"
        >닫을 시 응용 프로그램을 계속 실행</mat-checkbox
      >
    </mat-list-item> -->

    <mat-divider></mat-divider>

    <h1 mat-subheader>{{ 'settings.genernal.login' | translate }}</h1>
    <mat-list-item>
      <mat-checkbox
        [checked]="setting.autoLogin"
        (change)="onChangeAutoLogin($event)"
        >{{ 'settings.genernal.autoLogin' | translate }}</mat-checkbox
      >
    </mat-list-item>

    <mat-divider></mat-divider>

    <h1 mat-subheader>{{ 'settings.genernal.language' | translate }}</h1>
    <mat-list-item>
      <mat-form-field fxFlexFill>
        <mat-select
          [value]="setting.locale"
          (selectionChange)="onSelectionChangeLocale($event)"
        >
          <mat-option
            *ngFor="let language of languageList"
            [value]="language.name"
          >
            {{ language.displayName }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </mat-list-item>

    <mat-divider></mat-divider>

    <h1 mat-subheader>{{ 'settings.genernal.hrLanguage' | translate }}</h1>
    <mat-list-item>
      <mat-form-field fxFlexFill>
        <mat-select
          [value]="setting.hrInfoLocale"
          (selectionChange)="onSelectionChangeHrInfoLocale($event)"
        >
          <mat-option
            *ngFor="let language of languageList"
            [value]="language.name"
          >
            {{ language.displayName }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </mat-list-item>

    <mat-divider></mat-divider>

    <h1 mat-subheader>{{ 'settings.genernal.timezone' | translate }}</h1>
    <mat-list-item>
      <mat-form-field fxFlexFill>
        <mat-select
          [value]="setting.timezone"
          (selectionChange)="onSelectionChangeTimezone($event)"
        >
          <mat-option
            *ngFor="let timezone of timezoneList"
            [value]="timezone.name"
          >
            {{ timezone.displayName }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </mat-list-item>
  </mat-list>
</div>
