<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>
  <!-- TODO: uncomment and finish implementation when there will be agreement on using dark theme -->
  <!-- <div class="p-l-16 p-r-16 p-b-16">
    <p>{{'Theme' | translate}}</p>
    <div class="c8y-switch-multistate">
      <input tabindex="{{ (open$ | async) ? '0' : '-1'}}" type="radio" name="theme-switcher" id="op1" checked="checked" [attr.aria-label]="'Light'">
      <label for="op1" title="{{'Light' | translate}}">
        <i c8yIcon="sun"></i>
      </label>
      <input tabindex="{{ (open$ | async) ? '0' : '-1'}}" type="radio" name="theme-switcher" id="op2" [attr.aria-label]="'Dark'">
      <label for="op2" title="{{'Dark' | translate}}">
        <i c8yIcon="moon"></i></label>
      <input tabindex="{{ (open$ | async) ? '0' : '-1'}}" type="radio" name="theme-switcher" id="op3" [attr.aria-label]="'System'">
      <label for="op3" title="{{'System' | translate}}">
        <i c8yIcon="imac-settings"></i>
      </label>
      <div class="c8y-switch-multistate__handle"></div>
    </div>
  </div> -->
  <div class="form-group p-l-16 p-r-16">
    <label translate for="userLang">Language</label>
    <div class="c8y-select-wrapper">
      <select
        id="userLang"
        #selectLang
        tabindex="{{ (open$ | async) ? '0' : '-1' }}"
        [ngModel]="currentLang"
        (change)="onLanguageChange(selectLang.value)"
      >
        <option *ngFor="let language of languages" [value]="language.lang">
          {{ language.nativeLanguage }}
        </option>
      </select>
      <span></span>
    </div>
  </div>
</div>