<div *ngIf="!serviceAccounts" 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="serviceAccounts?.length == 0">
  <ng-container slot="title">{{ "serviceAccountsNoItemsTitle" | i18n }}</ng-container>
  <ng-container slot="description">{{ "serviceAccountsNoItemsMessage" | i18n }}</ng-container>
  <button
    slot="button"
    type="button"
    bitButton
    buttonType="secondary"
    (click)="newServiceAccountEvent.emit()"
  >
    <i class="bwi bwi-plus" aria-hidden="true"></i>
    {{ "newServiceAccount" | i18n }}
  </button>
</bit-no-items>

<bit-table *ngIf="serviceAccounts?.length >= 1" [dataSource]="dataSource">
  <ng-container header>
    <tr>
      <th bitCell class="tw-w-0">
        <label class="!tw-mb-0 tw-flex tw-w-fit tw-gap-2 !tw-font-bold !tw-text-muted">
          <input
            type="checkbox"
            (change)="$event ? toggleAll() : null"
            [checked]="selection.hasValue() && isAllSelected()"
            [indeterminate]="selection.hasValue() && !isAllSelected()"
          />
          {{ "all" | i18n }}
        </label>
      </th>
      <th bitCell colspan="2" bitSortable="name" default>{{ "name" | i18n }}</th>
      <th bitCell>{{ "secrets" | i18n }}</th>
      <th bitCell bitSortable="revisionDate">{{ "lastEdited" | i18n }}</th>
      <th bitCell class="tw-w-0">
        <button
          type="button"
          bitIconButton="bwi-ellipsis-v"
          buttonType="main"
          [title]="'options' | i18n"
          [attr.aria-label]="'options' | i18n"
          [bitMenuTriggerFor]="tableMenu"
        ></button>
      </th>
    </tr>
  </ng-container>
  <ng-template body let-rows$>
    <tr bitRow *ngFor="let serviceAccount of rows$ | async">
      <td bitCell>
        <input
          type="checkbox"
          (change)="$event ? selection.toggle(serviceAccount.id) : null"
          [checked]="selection.isSelected(serviceAccount.id)"
        />
      </td>
      <td bitCell class="tw-w-0 tw-pr-0">
        <i class="bwi bwi-wrench tw-text-muted" aria-hidden="true"></i>
      </td>
      <td bitCell class="tw-break-all">
        <a bitLink [routerLink]="serviceAccount.id">
          {{ serviceAccount.name }}
        </a>
      </td>
      <td bitCell>
        <!-- TODO add number of secrets once mapping is implemented-->
        <span> 0 </span>
      </td>
      <td bitCell>{{ serviceAccount.revisionDate | date : "medium" }}</td>
      <td bitCell>
        <button
          type="button"
          bitIconButton="bwi-ellipsis-v"
          buttonType="main"
          [title]="'options' | i18n"
          [attr.aria-label]="'options' | i18n"
          [bitMenuTriggerFor]="serviceAccountMenu"
        ></button>
      </td>
      <bit-menu #serviceAccountMenu>
        <a type="button" bitMenuItem [routerLink]="serviceAccount.id">
          <i class="bwi bwi-fw bwi-eye" aria-hidden="true"></i>
          {{ "viewServiceAccount" | i18n }}
        </a>
        <button type="button" bitMenuItem (click)="editServiceAccountEvent.emit(serviceAccount.id)">
          <i class="bwi bwi-fw bwi-pencil" aria-hidden="true"></i>
          {{ "editServiceAccount" | i18n }}
        </button>
        <button type="button" bitMenuItem (click)="delete(serviceAccount)">
          <i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
          <span class="tw-text-danger">
            {{ "deleteServiceAccount" | i18n }}
          </span>
        </button>
      </bit-menu>
    </tr>
  </ng-template>
</bit-table>

<bit-menu #tableMenu>
  <button type="button" bitMenuItem (click)="bulkDeleteServiceAccounts()">
    <i class="bwi bwi-fw bwi-trash tw-text-danger" aria-hidden="true"></i>
    <span class="tw-text-danger">
      {{ "deleteServiceAccounts" | i18n }}
    </span>
  </button>
</bit-menu>
