<app-header></app-header>

<bit-container>
  <p>{{ "inactive2faReportDesc" | i18n }}</p>
  @if (!hasLoaded && loading) {
    <div>
      <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>
  } @else {
    <div class="tw-mt-4">
      @if (!ciphers.length) {
        <bit-callout type="success" title="{{ 'goodNews' | i18n }}">
          {{ "noInactive2fa" | i18n }}
        </bit-callout>
      } @else {
        <bit-callout type="danger" title="{{ 'inactive2faFound' | i18n }}">
          {{ "inactive2faFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
        </bit-callout>
        @if (showFilterToggle && !isAdminConsoleActive) {
          @if (canDisplayToggleGroup()) {
            <bit-toggle-group
              [selected]="filterOrgStatus$ | async"
              (selectedChange)="filterOrgToggle($event)"
              [attr.aria-label]="'addAccessFilter' | i18n"
            >
              @for (status of filterStatus; track status) {
                <bit-toggle [value]="status">
                  {{ getName(status) }}
                  <span bitBadge variant="info"> {{ getCount(status) }} </span>
                </bit-toggle>
              }
            </bit-toggle-group>
          } @else {
            <bit-chip-select
              [placeholderText]="chipSelectOptions[0].label"
              [options]="chipSelectOptions"
              [ngModel]="selectedFilterChip"
              (ngModelChange)="filterOrgToggleChipSelect($event)"
              fullWidth="true"
            ></bit-chip-select>
          }
        }
        <bit-table-scroll [dataSource]="dataSource" [rowSize]="75">
          @if (!isAdminConsoleActive) {
            <ng-container header>
              <th bitCell></th>
              <th bitCell>{{ "name" | i18n }}</th>
              <th bitCell>{{ "owner" | i18n }}</th>
              <th bitCell></th>
            </ng-container>
          }
          <ng-template bitRowDef let-row>
            <td bitCell>
              <app-vault-icon [cipher]="row"></app-vault-icon>
            </td>
            <td bitCell>
              @if (!organization || canManageCipher(row)) {
                <a
                  bitLink
                  href="#"
                  appStopClick
                  (click)="selectCipher(row)"
                  title="{{ 'editItemWithName' | i18n: row.name }}"
                  >{{ row.name }}</a
                >
              } @else {
                <span>{{ row.name }}</span>
              }
              @if (!organization && row.organizationId) {
                <i
                  class="bwi bwi-collection-shared tw-ml-1"
                  appStopProp
                  title="{{ 'shared' | i18n }}"
                  aria-hidden="true"
                ></i>
                <span class="tw-sr-only">{{ "shared" | i18n }}</span>
              }
              @if (row.hasAttachments) {
                <i
                  class="bwi bwi-paperclip tw-ml-1"
                  appStopProp
                  title="{{ 'attachments' | i18n }}"
                  aria-hidden="true"
                ></i>
                <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
              }
              <br />
              <small>{{ row.subTitle }}</small>
            </td>
            <td bitCell>
              @if (!organization) {
                <app-org-badge
                  [disabled]="disabled"
                  [organizationId]="row.organizationId"
                  [organizationName]="row.organizationId | orgNameFromId: (organizations$ | async)"
                  appStopProp
                />
              }
            </td>
            <td bitCell class="tw-text-right">
              @if (cipherDocs.has(row.id)) {
                <a bitBadge href="{{ cipherDocs.get(row.id) }}" target="_blank" rel="noreferrer">
                  {{ "instructions" | i18n }}</a
                >
              }
            </td>
          </ng-template>
        </bit-table-scroll>
      }
    </div>
  }
</bit-container>
