<bit-dialog dialogSize="large" [title]="'removeMembers' | i18n">
  <ng-container bitDialogContent>
    @if (users().length <= 0) {
      <bit-callout type="danger">
        {{ "noSelectedUsersApplicable" | i18n }}
      </bit-callout>
    }
    @if (error()) {
      <bit-callout type="danger" [title]="'error' | i18n">
        {{ error() }}
      </bit-callout>
    }
    @if (!done()) {
      <ng-container>
        @if (users().length > 0 && !error()) {
          <bit-callout type="warning">
            <p bitTypography="body1">{{ removeUsersWarning }}</p>
            @if (showNoMasterPasswordWarning()) {
              <p bitTypography="body1">
                {{ "removeMembersWithoutMasterPasswordWarning" | i18n }}
              </p>
            }
          </bit-callout>
        }
        <bit-table>
          <ng-container header>
            <tr>
              <th bitCell colspan="2">{{ "user" | i18n }}</th>
              @if (showNoMasterPasswordWarning()) {
                <th bitCell>{{ "details" | i18n }}</th>
              }
            </tr>
          </ng-container>
          <ng-template body>
            @for (user of users(); track user.id) {
              <tr bitRow>
                <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) {
                    <small class="tw-text-muted tw-block">{{ user.name }}</small>
                  }
                </td>
                @if (showNoMasterPasswordWarning()) {
                  <td bitCell>
                    <span class="tw-text-muted tw-block tw-lowercase">
                      @if (user.hasMasterPassword === true) {
                        -
                      }
                      @if (user.hasMasterPassword === false) {
                        <i class="bwi bwi-exclamation-triangle" aria-hidden="true"></i>
                        {{ "noMasterPassword" | i18n }}
                      }
                    </span>
                  </td>
                }
              </tr>
            }
          </ng-template>
        </bit-table>
      </ng-container>
    }
    @if (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 users(); track user.id) {
              <tr bitRow>
                <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) {
                    <small class="tw-text-muted tw-block">{{ user.name }}</small>
                  }
                </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() && users().length > 0) {
      <button
        bitButton
        type="submit"
        buttonType="primary"
        [disabled]="loading()"
        [bitAction]="submit"
      >
        {{ "removeMembers" | i18n }}
      </button>
    }
    <button bitButton type="button" buttonType="secondary" bitDialogClose>
      {{ "close" | i18n }}
    </button>
  </ng-container>
</bit-dialog>
