<bit-dialog dialogSize="large" [title]="'confirmUsers' | i18n" [loading]="loading()">
  <ng-container bitDialogContent>
    @if (filteredUsers().length <= 0) {
      <bit-callout type="danger">
        {{ "noSelectedUsersApplicable" | i18n }}
      </bit-callout>
    }
    @if (error()) {
      <bit-callout type="danger" [title]="'error' | i18n">
        {{ error() }}
      </bit-callout>
    }
    @if (!loading() && !done()) {
      <ng-container>
        <p bitTypography="body1">
          {{ "fingerprintEnsureIntegrityVerify" | i18n }}
          <a
            bitLink
            href="https://bitwarden.com/help/fingerprint-phrase/"
            target="_blank"
            rel="noreferrer"
          >
            {{ "learnMore" | i18n }}</a
          >
        </p>
        <bit-table>
          <ng-container header>
            <tr>
              <th bitCell colspan="2">{{ "user" | i18n }}</th>
              <th bitCell>{{ "fingerprint" | i18n }}</th>
            </tr>
          </ng-container>
          <ng-template body>
            @for (user of filteredUsers(); track user.id) {
              <tr bitRow alignContent="middle">
                <td bitCell class="tw-w-5">
                  <bit-avatar
                    [text]="user | userName"
                    [id]="user | avatarId"
                    [color]="user.avatarColor"
                  ></bit-avatar>
                </td>
                <td bitCell>
                  {{ user.email }}
                  @if (user.name) {
                    <p class="tw-text-muted tw-text-sm">{{ user.name }}</p>
                  }
                </td>
                <td bitCell>
                  {{ fingerprints().get(user.id) }}
                </td>
              </tr>
            }
            @for (user of excludedUsers(); track user.id) {
              <tr alignContent="middle">
                <td bitCell class="tw-w-5">
                  <bit-avatar
                    [text]="user | userName"
                    [id]="user | avatarId"
                    [color]="user.avatarColor"
                  ></bit-avatar>
                </td>
                <td bitCell>
                  {{ user.email }}
                  @if (user.name) {
                    <p class="tw-text-muted tw-text-sm">{{ user.name }}</p>
                  }
                </td>
                <td bitCell>
                  {{ "bulkFilteredMessage" | i18n }}
                </td>
              </tr>
            }
          </ng-template>
        </bit-table>
      </ng-container>
    }
    @if (!loading() && done()) {
      <ng-container>
        <bit-table>
          <ng-container header>
            <tr>
              <th bitCell colspan="2">{{ "user" | i18n }}</th>
              <th bitCell>{{ "status" | i18n }}</th>
            </tr>
          </ng-container>
          <ng-template body>
            @for (user of filteredUsers(); track user.id) {
              <tr bitRow alignContent="middle">
                <td bitCell class="tw-w-5">
                  <bit-avatar
                    [text]="user | userName"
                    [id]="user | avatarId"
                    [color]="user.avatarColor"
                  ></bit-avatar>
                </td>
                <td bitCell>
                  {{ user.email }}
                  @if (user.name) {
                    <p class="tw-text-muted tw-text-sm">{{ user.name }}</p>
                  }
                </td>
                @if (statuses().has(user.id)) {
                  <td bitCell>{{ statuses().get(user.id) }}</td>
                }
                @if (!statuses().has(user.id)) {
                  <td bitCell>{{ "bulkFilteredMessage" | i18n }}</td>
                }
              </tr>
            }
          </ng-template>
        </bit-table>
      </ng-container>
    }
  </ng-container>
  <ng-container bitDialogFooter>
    @if (!done()) {
      <button
        bitButton
        type="submit"
        buttonType="primary"
        [bitAction]="submit"
        [disabled]="loading()"
      >
        {{ "confirm" | i18n }}
      </button>
    }
    <button bitButton type="button" buttonType="secondary" bitDialogClose>
      {{ "close" | i18n }}
    </button>
  </ng-container>
</bit-dialog>
