<popup-page>
  <popup-header slot="header" pageTitle="{{ 'settings' | i18n }}">
    <ng-container slot="end">
      <app-pop-out></app-pop-out>
      <app-current-account></app-current-account>
    </ng-container>
  </popup-header>

  <bit-item-group>
    <bit-item>
      <a bit-item-content routerLink="/account-security">
        <i slot="start" class="bwi bwi-lock" aria-hidden="true"></i>
        {{ "accountSecurity" | i18n }}
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
    <bit-item>
      <a bit-item-content routerLink="/autofill">
        <i slot="start" class="bwi bwi-check-circle" aria-hidden="true"></i>
        {{ "autofill" | i18n }}
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
    <bit-item>
      <a bit-item-content routerLink="/notifications">
        <i slot="start" class="bwi bwi-file-text" aria-hidden="true"></i>
        {{ "notifications" | i18n }}
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
    <bit-item>
      <a bit-item-content routerLink="/vault-settings">
        <i slot="start" class="bwi bwi-vault" aria-hidden="true"></i>
        {{ "vault" | i18n }}
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
    <bit-item>
      <a bit-item-content routerLink="/appearance">
        <i slot="start" class="bwi bwi-eye" aria-hidden="true"></i>
        {{ "appearance" | i18n }}
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
    <bit-item>
      <a bit-item-content routerLink="/about">
        <i slot="start" class="bwi bwi-info-circle" aria-hidden="true"></i>
        {{ "about" | i18n }}
        <i slot="end" class="bwi bwi-angle-right" aria-hidden="true"></i>
      </a>
    </bit-item>
  </bit-item-group>
</popup-page>
