<form [formGroup]="formGroup" [bitSubmit]="submit" class="tw-mt-5">
  <bit-form-field>
    <bit-label>{{ label }}</bit-label>
    <bit-multi-select
      class="tw-mr-4 tw-w-full"
      formControlName="multiSelect"
      [baseItems]="selectItems$ | async"
      [loading]="loading"
    ></bit-multi-select>
    <bit-hint>{{ hint }}</bit-hint>
    <button type="submit" bitButton buttonType="primary" bitFormButton>
      {{ "add" | i18n }}
    </button>
  </bit-form-field>
</form>

<ng-container>
  <bit-table *ngIf="rows$ | async as rows; else spinner">
    <ng-container header>
      <tr>
        <th bitCell colspan="2">{{ columnTitle }}</th>
        <th bitCell>{{ "permissions" | i18n }}</th>
      </tr>
    </ng-container>

    <ng-template body>
      <ng-container *ngIf="rows.length > 0; else empty">
        <tr bitRow *ngFor="let row of rows">
          <td bitCell class="tw-w-0 tw-pr-0">
            <i class="bwi {{ row.icon }} tw-text-muted" aria-hidden="true"></i>
          </td>
          <td bitCell class="tw-max-w-sm tw-truncate">{{ row.name }}</td>
          <td bitCell>
            <bit-form-field
              *ngIf="!row.static; else staticPermissions"
              class="tw-mb-auto tw-inline-block tw-w-auto"
            >
              <select bitInput (change)="update($event.target, row)" [disabled]="row.static">
                <option value="canRead" [selected]="row.read && row.write != true">
                  {{ "canRead" | i18n }}
                </option>
                <option value="canReadWrite" [selected]="row.read && row.write">
                  {{ "canReadWrite" | i18n }}
                </option>
              </select>
            </bit-form-field>
            <ng-template #staticPermissions>
              <span *ngIf="row.read && row.write != true">{{ "canRead" | i18n }}</span>
              <span *ngIf="row.read != true && row.write">{{ "canWrite" | i18n }}</span>
              <span *ngIf="row.read && row.write">{{ "canReadWrite" | 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"
              [bitAction]="delete(row)"
            ></button>
          </td>
        </tr>
      </ng-container>
    </ng-template>
  </bit-table>
</ng-container>

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