<app-header></app-header>

<bit-container>
  <p>{{ "inactive2faReportDesc" | i18n }}</p>
  <div *ngIf="!hasLoaded && loading">
    <i
      class="bwi bwi-spinner bwi-spin tw-text-muted"
      title="{{ 'loading' | i18n }}"
      aria-hidden="true"
    ></i>
    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
  </div>
  <div class="tw-mt-4" *ngIf="hasLoaded">
    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
      {{ "noInactive2fa" | i18n }}
    </bit-callout>
    <ng-container *ngIf="ciphers.length">
      <bit-callout type="danger" title="{{ 'inactive2faFound' | i18n }}">
        {{ "inactive2faFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
      </bit-callout>
      <bit-toggle-group
        *ngIf="showFilterToggle && !isAdminConsoleActive"
        [selected]="filterOrgStatus$ | async"
        (selectedChange)="filterOrgToggle($event)"
        [attr.aria-label]="'addAccessFilter' | i18n"
      >
        <ng-container *ngFor="let status of filterStatus">
          <bit-toggle [value]="status">
            {{ getName(status) }}
            <span bitBadge variant="info"> {{ getCount(status) }} </span>
          </bit-toggle>
        </ng-container>
      </bit-toggle-group>
      <bit-table [dataSource]="dataSource">
        <ng-container header *ngIf="!isAdminConsoleActive">
          <tr bitRow>
            <th bitCell></th>
            <th bitCell>{{ "name" | i18n }}</th>
            <th bitCell>{{ "owner" | i18n }}</th>
            <th bitCell></th>
          </tr>
        </ng-container>
        <tbody>
          <ng-template body let-rows$>
            <tr bitRow *ngFor="let r of rows$ | async">
              <td bitCell>
                <app-vault-icon [cipher]="r"></app-vault-icon>
              </td>
              <td bitCell>
                <a
                  bitLink
                  href="#"
                  appStopClick
                  (click)="selectCipher(r)"
                  title="{{ 'editItemWithName' | i18n: r.name }}"
                  >{{ r.name }}</a
                >
                <ng-container *ngIf="!organization && r.organizationId">
                  <i
                    class="bwi bwi-collection"
                    appStopProp
                    title="{{ 'shared' | i18n }}"
                    aria-hidden="true"
                  ></i>
                  <span class="tw-sr-only">{{ "shared" | i18n }}</span>
                </ng-container>
                <ng-container *ngIf="r.hasAttachments">
                  <i
                    class="bwi bwi-paperclip"
                    appStopProp
                    title="{{ 'attachments' | i18n }}"
                    aria-hidden="true"
                  ></i>
                  <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
                </ng-container>
                <br />
                <small>{{ r.subTitle }}</small>
              </td>
              <td bitCell>
                <app-org-badge
                  *ngIf="!organization"
                  [disabled]="disabled"
                  [organizationId]="r.organizationId"
                  [organizationName]="r.organizationId | orgNameFromId: (organizations$ | async)"
                  appStopProp
                >
                </app-org-badge>
              </td>
              <td bitCell class="tw-text-right">
                <a
                  bitBadge
                  href="{{ cipherDocs.get(r.id) }}"
                  target="_blank"
                  rel="noreferrer"
                  *ngIf="cipherDocs.has(r.id)"
                >
                  {{ "instructions" | i18n }}</a
                >
              </td>
            </tr>
          </ng-template>
        </tbody></bit-table
      >
    </ng-container>
  </div>
  <ng-template #cipherAddEdit></ng-template>
</bit-container>
