<header>
  <div class="left">
    <button type="button" routerLink="/tabs/settings">
      <span class="header-icon"><i class="bwi bwi-angle-left" aria-hidden="true"></i></span>
      <span>{{ "back" | i18n }}</span>
    </button>
  </div>
  <h1 class="center">
    <span class="title">{{ "appearance" | i18n }}</span>
  </h1>
  <div class="right">
    <app-pop-out></app-pop-out>
  </div>
</header>
<main tabindex="-1">
  <div class="box">
    <div class="box-content">
      <div class="box-content-row" appBoxRow>
        <label for="theme">{{ "theme" | i18n }}</label>
        <select
          id="theme"
          name="Theme"
          aria-describedby="themeHelp"
          [(ngModel)]="theme"
          (change)="saveTheme()"
        >
          <option *ngFor="let o of themeOptions" [ngValue]="o.value">{{ o.name }}</option>
        </select>
      </div>
    </div>
    <div id="themeHelp" class="box-footer">
      {{ accountSwitcherEnabled ? ("themeDescAlt" | i18n) : ("themeDesc" | i18n) }}
    </div>
  </div>
  <div class="box">
    <div class="box-content">
      <div class="box-content-row box-content-row-checkbox" appBoxRow>
        <label for="badge">{{ "enableBadgeCounter" | i18n }}</label>
        <input
          id="badge"
          type="checkbox"
          aria-describedby="badgeHelp"
          (change)="updateBadgeCounter()"
          [(ngModel)]="enableBadgeCounter"
        />
      </div>
    </div>
    <div id="badgeHelp" class="box-footer">{{ "badgeCounterDesc" | i18n }}</div>
  </div>
  <div class="box">
    <div class="box-content">
      <div class="box-content-row box-content-row-checkbox" appBoxRow>
        <label for="favicon">{{ "enableFavicon" | i18n }}</label>
        <input
          id="favicon"
          type="checkbox"
          aria-describedby="faviconHelp"
          (change)="updateFavicon()"
          [(ngModel)]="enableFavicon"
        />
      </div>
    </div>
    <div id="faviconHelp" class="box-footer">
      {{ accountSwitcherEnabled ? ("faviconDescAlt" | i18n) : ("faviconDesc" | i18n) }}
    </div>
  </div>
  <div class="box">
    <div class="box-content">
      <div class="box-content-row box-content-row-checkbox" appBoxRow>
        <label for="routing">{{ "enableAnimations" | i18n }}</label>
        <input
          id="routing"
          type="checkbox"
          (change)="updateRoutingAnimation()"
          [(ngModel)]="enableRoutingAnimation"
        />
      </div>
    </div>
  </div>
</main>
