<div class="tab-page">
  <router-outlet></router-outlet>
  <nav class="tabs">
    <ul>
      <li routerLinkActive="active" #rlaCurrentTab="routerLinkActive" *ngIf="showCurrentTab">
        <button
          type="button"
          routerLink="current"
          appA11yTitle="{{ 'currentTab' | i18n }}"
          [attr.aria-pressed]="rlaCurrentTab.isActive"
        >
          <i class="bwi bwi-folder-closed-f bwi-2x" aria-hidden="true"></i>{{ "tab" | i18n }}
        </button>
      </li>
      <li routerLinkActive="active" #rlaMyVault="routerLinkActive">
        <button
          type="button"
          routerLink="vault"
          appA11yTitle="{{ 'myVault' | i18n }}"
          [attr.aria-pressed]="rlaMyVault.isActive"
        >
          <i class="bwi bwi-lock-f bwi-2x" aria-hidden="true"></i>{{ "vault" | i18n }}
        </button>
      </li>
      <li routerLinkActive="active" #rlaSend="routerLinkActive">
        <button
          type="button"
          routerLink="send"
          appA11yTitle="{{ 'send' | i18n }}"
          [attr.aria-pressed]="rlaSend.isActive"
        >
          <i class="bwi bwi-send-f bwi-2x" aria-hidden="true"></i>{{ "send" | i18n }}
        </button>
      </li>
      <li routerLinkActive="active" #rlaGenerator="routerLinkActive">
        <button
          type="button"
          routerLink="generator"
          appA11yTitle="{{ 'passGen' | i18n }}"
          [attr.aria-pressed]="rlaGenerator.isActive"
        >
          <i class="bwi bwi-generate-f bwi-2x" aria-hidden="true"></i>{{ "generator" | i18n }}
        </button>
      </li>
      <li routerLinkActive="active" #rlaSettings="routerLinkActive">
        <button
          type="button"
          routerLink="settings"
          appA11yTitle="{{ 'settings' | i18n }}"
          [attr.aria-pressed]="rlaSettings.isActive"
        >
          <i class="bwi bwi-cog-f bwi-2x" aria-hidden="true"></i>{{ "settings" | i18n }}
        </button>
      </li>
    </ul>
  </nav>
</div>
