<app-header>
  @let isLoading = isLoading$ | async;

  @if (!isLoading) {
    <bit-search
      [formControl]="searchControl"
      [placeholder]="'searchMembers' | i18n"
      class="tw-grow"
    ></bit-search>
    <button
      type="button"
      bitButton
      buttonType="primary"
      endIcon="bwi-import"
      [bitAction]="exportReportAction"
    >
      {{ "exportVerb" | i18n }}
    </button>
  }
</app-header>

<div class="tw-max-w-4xl">
  <p bitTypography="body1">
    {{ "memberAccessReportPageDesc" | vfo1I18n: "memberAccessReportPageDescV2" }}
  </p>
</div>

@if (isLoading) {
  <div class="tw-flex-col tw-flex tw-justify-center tw-items-center tw-gap-5 tw-mt-4">
    <bit-icon
      name="bwi-spinner"
      class="bwi-2x bwi-spin tw-text-primary-600"
      [ariaLabel]="'loading' | i18n"
    ></bit-icon>
    <h2 bitTypography="h1">{{ "loading" | i18n }}</h2>
  </div>
} @else {
  <bit-table-scroll [dataSource]="dataSource" [rowSize]="53">
    <ng-container header>
      <th bitCell bitSortable="email" default>{{ "members" | i18n }}</th>
      <th bitCell bitSortable="groupsCount" class="tw-w-[278px]">{{ "groups" | i18n }}</th>
      <th bitCell bitSortable="collectionsCount" class="tw-w-[278px]">
        {{ "collections" | i18n }}
      </th>
      <th bitCell bitSortable="itemsCount" class="tw-w-[278px]">{{ "items" | i18n }}</th>
    </ng-container>
    <ng-template bitRowDef let-row>
      <td bitCell>
        <div class="tw-flex tw-items-center">
          <bit-avatar
            [text]="row.name ? row.name : row.email"
            [id]="row.userIdFromOrgUser"
            [color]="row.avatarColor"
            class="tw-mr-3"
          ></bit-avatar>
          <div class="tw-flex tw-flex-col">
            <button type="button" bitLink (click)="edit(row)">
              {{ row.name }}
            </button>
            <div class="tw-text-sm tw-mt-1 tw-text-muted">
              {{ row.email }}
            </div>
          </div>
        </div>
      </td>
      <td bitCell class="tw-text-muted tw-w-[278px]">{{ row.groupsCount }}</td>
      <td bitCell class="tw-text-muted tw-w-[278px]">{{ row.collectionsCount }}</td>
      <td bitCell class="tw-text-muted tw-w-[278px]">{{ row.itemsCount }}</td>
    </ng-template>
  </bit-table-scroll>
}
