<div class="tw-flex">
  <ng-container *ngIf="!addButtonMode; else buttonMode">
    <bit-form-field class="tw-grow">
      <bit-label>{{ label }}</bit-label>
      <bit-multi-select
        class="tw-w-full"
        [loading]="loading"
        [baseItems]="selectionList.deselectedItems"
        [disabled]="disabled"
        [removeSelectedItems]="true"
        (blur)="handleBlur()"
        (onItemsConfirmed)="selectItems($event)"
      ></bit-multi-select>
      <bit-hint>{{ hint }}</bit-hint>
    </bit-form-field>
  </ng-container>
</div>

<bit-table [formGroup]="formGroup" *ngIf="!loading; else spinner">
  <ng-container header>
    <tr>
      <th bitCell colspan="2">{{ columnTitle }}</th>
      <th bitCell>{{ "permissions" | i18n }}</th>
    </tr>
  </ng-container>
  <ng-template body formArrayName="items">
    <ng-container *ngIf="selectionList.selectedItems.length > 0; else empty">
      <tr
        bitRow
        *ngFor="let item of selectionList.selectedItems; let i = index"
        [formGroupName]="i"
      >
        <td bitCell class="tw-w-0 tw-pr-0">
          <i class="bwi {{ item.icon }} tw-text-muted" aria-hidden="true"></i>
        </td>
        <td bitCell class="tw-max-w-sm tw-truncate">{{ item.labelName }}</td>
        <td bitCell class="tw-mb-auto tw-inline-block tw-w-auto">
          <select
            *ngIf="!staticPermission; else static"
            bitInput
            formControlName="permission"
            (blur)="handleBlur()"
          >
            <option *ngFor="let p of permissionList" [value]="p.perm">
              {{ p.labelId | i18n }}
            </option>
          </select>
          <ng-template #static>
            <span>{{ staticPermission | i18n }}</span>
          </ng-template>
        </td>
        <td bitCell class="tw-w-0">
          <button
            type="button"
            bitIconButton="bwi-close"
            buttonType="main"
            size="default"
            [attr.title]="'remove' | i18n"
            [attr.aria-label]="'remove' | i18n"
            (click)="selectionList.deselectItem(item.id); handleBlur()"
          ></button>
        </td>
      </tr>
    </ng-container>
  </ng-template>
</bit-table>

<ng-template #empty>
  <div class="tw-mt-4 tw-text-center">
    {{ emptyMessage }}
  </div>
</ng-template>

<ng-template #buttonMode>
  <bit-form-field class="tw-grow" [formGroup]="multiSelectFormGroup">
    <bit-label>{{ label }}</bit-label>
    <bit-multi-select
      class="tw-w-full"
      formControlName="multiSelect"
      [baseItems]="selectionList.deselectedItems"
      (blur)="handleBlur()"
    ></bit-multi-select>
    <bit-hint>{{ hint }}</bit-hint>
  </bit-form-field>

  <div class="tw-ml-3 tw-mt-7 tw-shrink-0">
    <button type="button" bitButton buttonType="secondary" (click)="addButton()">
      {{ "add" | i18n }}
    </button>
  </div>
</ng-template>

<ng-template #spinner>
  <div class="tw-items-center tw-justify-center tw-pt-10 tw-text-center">
    <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
  </div>
</ng-template>
