<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" [bitAction]="exportReportAction">
      <span>{{ "export" | i18n }}</span>
      <i class="bwi bwi-fw bwi-sign-in" aria-hidden="true"></i>
    </button>
  }
</app-header>

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

@if (isLoading) {
  <div class="tw-flex-col tw-flex tw-justify-center tw-items-center tw-gap-5 tw-mt-4">
    <i
      class="bwi bwi-2x bwi-spinner bwi-spin tw-text-primary-600"
      title="{{ 'loading' | i18n }}"
      aria-hidden="true"
    ></i>
    <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 size="small" [text]="row.name" 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>
}
