<div class="separator-top p-t-8 p-b-8">
  <div class="c8y-right-drawer__item sticky-top">
    <i c8yIcon="eyedropper"></i>
    <span class="text-bold">{{ 'UI settings' | translate }}</span>
  </div>

  <div
    class="p-l-16 p-r-16 p-b-16"
    *ngIf="themeSwitcher.darkThemeAvailable$ | async"
  >
    <p translate>Theme</p>
    <div
      class="c8y-switch-multistate"
      *ngIf="themeSwitcher.userSelectedThemePreference$ | async as themePreference"
    >
      <ng-container *ngFor="let themeOption of themeSwitcher.themeOptions; index as i">
        <input
          [attr.aria-label]="themeOption.label"
          tabindex="{{ (open$ | async) ? '0' : '-1' }}"
          name="theme-switcher"
          type="radio"
          [id]="'theme-option-' + i"
          [disabled]="themeSwitcher.disableThemeSelection$ | async"
          [checked]="themePreference === themeOption.value"
          (click)="themeSwitcher.changeUserPreference(themeOption.value)"
        />
        <label
          title="{{ themeOption.label | translate }}"
          [for]="'theme-option-' + i"
        >
          <i [c8yIcon]="themeOption.icon"></i>
        </label>
      </ng-container>
      <div class="c8y-switch-multistate__handle"></div>
    </div>
  </div>

  <div class="form-group p-l-16 p-r-16">
    <label
      for="userLang"
      translate
    >
      Language
    </label>
    <div class="c8y-select-wrapper">
      <select
        id="userLang"
        tabindex="{{ (open$ | async) ? '0' : '-1' }}"
        #selectLang
        [ngModel]="currentLang"
        (change)="onLanguageChange(selectLang.value)"
      >
        <option
          *ngFor="let language of languages"
          [value]="language.lang"
        >
          {{ language.nativeLanguage }}
        </option>
      </select>
      <span></span>
    </div>
  </div>
</div>