<app-header></app-header>

<bit-container>
  <p>{{ "exposedPasswordsReportDesc" | i18n }}</p>
  <button type="submit" buttonType="primary" bitButton [loading]="loading" (click)="load()">
    {{ "checkExposedPasswords" | i18n }}
  </button>
  <div class="tw-mt-4" *ngIf="hasLoaded">
    <bit-callout type="success" title="{{ 'goodNews' | i18n }}" *ngIf="!ciphers.length">
      {{ "noExposedPasswords" | i18n }}
    </bit-callout>
    <ng-container *ngIf="ciphers.length">
      <bit-callout type="danger" title="{{ 'exposedPasswordsFound' | i18n }}" [useAlertRole]="true">
        {{ "exposedPasswordsFoundReportDesc" | 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>
          <tr bitRow>
            <th bitCell></th>
            <th bitCell bitSortable="name">{{ "name" | i18n }}</th>
            <th bitCell bitSortable="organizationId" *ngIf="!isAdminConsoleActive">
              {{ "owner" | i18n }}
            </th>
            <th bitCell class="tw-text-right" bitSortable="exposedXTimes">
              {{ "timesExposed" | i18n }}
            </th>
          </tr>
        </ng-container>
        <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>
              <ng-container *ngIf="!organization || canManageCipher(r); else cantManage">
                <a
                  bitLink
                  href="#"
                  appStopClick
                  (click)="selectCipher(r)"
                  title="{{ 'editItemWithName' | i18n: r.name }}"
                  >{{ r.name }}</a
                >
              </ng-container>
              <ng-template #cantManage>
                <span>{{ r.name }}</span>
              </ng-template>
              <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 *ngIf="!isAdminConsoleActive">
              <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">
              <span bitBadge variant="warning">
                {{ "exposedXTimes" | i18n: (r.exposedXTimes | number) }}
              </span>
            </td>
          </tr>
        </ng-template>
      </bit-table>
    </ng-container>
  </div>
  <ng-template #cipherAddEdit></ng-template>
</bit-container>
