<app-header></app-header>

<bit-container>
  <p>{{ "exposedPasswordsReportDesc" | i18n }}</p>
  <button type="submit" buttonType="primary" bitButton [loading]="loading" (click)="load()">
    {{ "checkExposedPasswords" | i18n }}
  </button>
  @if (hasLoaded) {
    <div class="tw-mt-4">
      @if (!ciphers.length) {
        <bit-callout type="success" title="{{ 'goodNews' | i18n }}">
          {{ "noExposedPasswords" | i18n }}
        </bit-callout>
      } @else {
        <bit-callout
          type="danger"
          title="{{ 'exposedPasswordsFound' | i18n }}"
          [useAlertRole]="true"
        >
          {{ "exposedPasswordsFoundReportDesc" | 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]="54">
          <ng-container header>
            <th bitCell></th>
            <th bitCell bitSortable="name">{{ "name" | i18n }}</th>
            @if (!isAdminConsoleActive) {
              <th bitCell bitSortable="organizationId">
                {{ "owner" | i18n }}
              </th>
            }
            <th bitCell class="tw-text-right" bitSortable="exposedXTimes">
              {{ "timesExposed" | i18n }}
            </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>
            @if (!isAdminConsoleActive) {
              <td bitCell>
                @if (!organization) {
                  <app-org-badge
                    [disabled]="disabled"
                    [organizationId]="row.organizationId"
                    [organizationName]="
                      row.organizationId | orgNameFromId: (organizations$ | async)
                    "
                    appStopProp
                  >
                  </app-org-badge>
                }
              </td>
            }
            <td bitCell class="tw-text-right">
              <span bitBadge variant="warning">
                {{ "exposedXTimes" | i18n: (row.exposedXTimes | number) }}
              </span>
            </td>
          </ng-template>
        </bit-table-scroll>
      }
    </div>
  }
</bit-container>
