<app-header>
  <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>

<bit-table [dataSource]="dataSource" class="tw-mt-2">
  <ng-container header>
    <tr>
      <th bitCell bitSortable="name" default>{{ "members" | i18n }}</th>
      <th bitCell bitSortable="groupsCount">{{ "groups" | i18n }}</th>
      <th bitCell bitSortable="collectionsCount">{{ "collections" | i18n }}</th>
      <th bitCell bitSortable="itemsCount">{{ "items" | i18n }}</th>
    </tr>
  </ng-container>
  <ng-template body let-rows$>
    <tr bitRow *ngFor="let r of rows$ | async">
      <td bitCell>
        <div class="tw-flex tw-items-center">
          <bit-avatar size="small" [text]="r.name" class="tw-mr-3"></bit-avatar>
          <div class="tw-flex tw-flex-col">
            <button type="button" bitLink (click)="edit(r)">
              {{ r.name }}
            </button>

            <div class="tw-text-sm tw-mt-1 tw-text-muted">
              {{ r.email }}
            </div>
          </div>
        </div>
      </td>
      <td bitCell class="tw-text-muted tw-w-[278px] tw-p-4">{{ r.groupsCount }}</td>
      <td bitCell class="tw-text-muted tw-w-[278px] tw-p-4">{{ r.collectionsCount }}</td>
      <td bitCell class="tw-text-muted tw-w-[278px] tw-p-4">{{ r.itemsCount }}</td>
    </tr>
  </ng-template>
</bit-table>
