<div *ngIf="!tokens" class="tw-items-center tw-justify-center tw-pt-64 tw-text-center">
  <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
</div>

<bit-no-items *ngIf="tokens?.length == 0">
  <ng-container slot="title">{{ "accessTokensNoItemsTitle" | i18n }}</ng-container>
  <ng-container slot="description">{{ "accessTokensNoItemsDesc" | i18n }}</ng-container>
  <button
    type="button"
    slot="button"
    bitButton
    buttonType="secondary"
    (click)="newAccessTokenEvent.emit()"
    startIcon="bwi-plus"
  >
    {{ "createAccessToken" | i18n }}
  </button>
</bit-no-items>

<bit-table *ngIf="tokens?.length >= 1" [dataSource]="dataSource">
  <ng-container header>
    <tr>
      <th bitCell class="tw-w-0">
        <input
          type="checkbox"
          (change)="$event ? toggleAll() : null"
          [checked]="selection.hasValue() && isAllSelected()"
          [indeterminate]="selection.hasValue() && !isAllSelected()"
          [attr.aria-label]="'selectAll' | i18n"
        />
      </th>
      <th bitCell bitSortable="name" default>{{ "name" | i18n }}</th>
      <th bitCell bitSortable="status" [fn]="sortByStatus">{{ "status" | i18n }}</th>
      <th bitCell bitSortable="expireAt" [fn]="sortByExpireAt">{{ "expires" | i18n }}</th>
      <th bitCell bitSortable="revisionDate">{{ "lastEdited" | i18n }}</th>
      <th bitCell class="tw-w-0">
        <button
          type="button"
          bitIconButton="bwi-ellipsis-v"
          buttonType="primaryGhost"
          [bitMenuTriggerFor]="tableMenu"
          [label]="'options' | i18n"
        ></button>
      </th>
    </tr>
  </ng-container>
  <ng-template body let-rows$>
    <tr bitRow *ngFor="let token of rows$ | async">
      <td bitCell>
        <input
          type="checkbox"
          (change)="$event ? selection.toggle(token.id) : null"
          [checked]="selection.isSelected(token.id)"
        />
      </td>
      <td bitCell>{{ token.name }}</td>
      <td bitCell [ngSwitch]="getTokenStatus(token)">
        <bit-badge *ngSwitchCase="'expired'" variant="danger" size="small">
          {{ "expired" | i18n }}
        </bit-badge>
        <bit-badge *ngSwitchCase="'expiringSoon'" variant="warning" size="small">
          {{ "expiringSoon" | i18n }}
        </bit-badge>
        <bit-badge *ngSwitchDefault variant="success" size="small">
          {{ "tokenActive" | i18n }}
        </bit-badge>
      </td>
      <td bitCell>
        {{ token.expireAt == null ? ("never" | i18n) : (token.expireAt | date: "medium") }}
      </td>
      <td bitCell>{{ token.revisionDate | date: "medium" }}</td>
      <td bitCell>
        <button
          type="button"
          bitIconButton="bwi-ellipsis-v"
          buttonType="primaryGhost"
          [label]="'options' | i18n"
          [bitMenuTriggerFor]="tokenMenu"
        ></button>
      </td>

      <bit-menu #tokenMenu>
        <button
          type="button"
          bitMenuItem
          variant="danger"
          (click)="revokeAccessTokensEvent.emit([token])"
        >
          <bit-icon fixedWidth name="bwi-minus-circle" slot="start" />
          {{ "revokeAccessToken" | i18n }}
        </button>
      </bit-menu>
    </tr>
  </ng-template>
</bit-table>

<bit-menu #tableMenu>
  <button type="button" bitMenuItem variant="danger" (click)="revokeSelected()">
    <bit-icon fixedWidth name="bwi-minus-circle" slot="start" />
    {{ "revokeAccessTokens" | i18n }}
  </button>
</bit-menu>
