<app-header></app-header>

<bit-container>
  <p>{{ "weakPasswordsReportDesc" | i18n }}</p>
  @if (!hasLoaded && loading) {
    <div>
      <bit-icon
        name="bwi-spinner"
        class="bwi-spin tw-text-muted"
        [ariaLabel]="'loading' | i18n"
        [title]="'loading' | i18n"
      ></bit-icon>
      <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 }}">
          {{ "noWeakPasswords" | i18n }}
        </bit-callout>
      } @else {
        <bit-callout type="danger" title="{{ 'weakPasswordsFound' | i18n }}">
          {{ "weakPasswordsFoundReportDesc" | i18n: (ciphers.length | number) : vaultMsg }}
        </bit-callout>
        @if (showFilterToggle && !isAdminConsoleActive) {
          @if (canDisplayToggleGroup()) {
            <bit-toggle-group
              [selected]="filterOrgStatus$ | async"
              (selectedChange)="filterOrgToggle($event)"
              [label]="'addAccessFilter' | i18n"
            >
              @for (status of filterStatus; track status) {
                <bit-toggle [value]="status">
                  {{ getName(status) }}
                  <bit-berry [value]="getCount(status)"></bit-berry>
                </bit-toggle>
              }
            </bit-toggle-group>
          } @else {
            <bit-chip-filter
              [placeholderText]="chipSelectOptions[0].label"
              [options]="chipSelectOptions"
              [ngModel]="selectedFilterChip"
              (ngModelChange)="filterOrgToggleChipSelect($event)"
              fullWidth="true"
            ></bit-chip-filter>
          }
        }
        <bit-table-scroll [dataSource]="dataSource" [rowSize]="54" layout="fixed">
          <ng-container header>
            <th bitCell class="tw-w-12"></th>
            <th bitCell bitSortable="name">{{ "name" | i18n }}</th>
            @if (!isAdminConsoleActive) {
              <th bitCell bitSortable="organizationId" class="tw-w-1/4">
                {{ "owner" | i18n }}
              </th>
            }
            <th bitCell class="tw-text-right" bitSortable="scoreKey" default="desc">
              {{ "weakness" | i18n }}
            </th>
          </ng-container>
          <ng-template bitRowDef let-row>
            <td bitCell>
              <app-vault-icon [cipher]="row"></app-vault-icon>
            </td>
            <td bitCell class="tw-truncate tw-max-w-0">
              @if (!organization || canManageCipher(row)) {
                <a
                  bitLink
                  href="#"
                  appStopClick
                  (click)="selectCipher(row)"
                  title="{{ 'editItemWithName' | i18n: row.name }}"
                  >{{ row.name }}</a
                >
              } @else {
                <span title="{{ row.name }}">{{ row.name }}</span>
              }
              @if (!organization && row.organizationId) {
                <bit-icon
                  [name]="'bwi-collection-shared' | vfo1Icon"
                  class="tw-ml-1"
                  appStopProp
                  [title]="'shared' | i18n"
                ></bit-icon>
                <span class="tw-sr-only">{{ "shared" | i18n }}</span>
              }
              @if (row.hasAttachments) {
                <bit-icon
                  name="bwi-paperclip"
                  class="tw-ml-1"
                  appStopProp
                  [title]="'attachments' | i18n"
                ></bit-icon>
                <span class="tw-sr-only">{{ "attachments" | i18n }}</span>
              }
              <br />
              <small>{{ row.subTitle }}</small>
            </td>
            @if (!isAdminConsoleActive) {
              <td bitCell>
                @if (row.organizationId) {
                  <bit-badge variant="secondary" size="small">
                    {{ row.organizationId | orgNameFromId: (organizations$ | async) }}
                  </bit-badge>
                } @else {
                  <bit-badge variant="secondary" size="small">
                    {{ "me" | i18n }}
                  </bit-badge>
                }
              </td>
            }
            <td bitCell class="tw-text-right">
              <bit-badge [variant]="row.reportValue.badgeVariant" size="small">
                {{ row.reportValue.label | i18n }}
              </bit-badge>
            </td>
          </ng-template>
        </bit-table-scroll>
      }
    </div>
  }
</bit-container>
