@if (!hideMultiSelect()) {
  <div class="tw-flex tw-gap-3">
    @if (permissionMode() == "edit") {
      <bit-form-field class="tw-shrink-0 tw-basis-2/5">
        <bit-label>{{ "permission" | i18n }}</bit-label>
        <bit-select
          bitInput
          data-testid="permission"
          [disabled]="disabled()"
          [ngModel]="initialPermissionValue()"
          (ngModelChange)="initialPermissionValue.set($event)"
          [ngModelOptions]="{ standalone: true }"
          (closed)="handleBlur()"
        >
          @for (p of permissionList; track p) {
            <bit-option
              [value]="p.perm"
              [label]="p.labelId | vfo1I18n: p.vfo1LabelId ?? p.labelId"
            />
          }
        </bit-select>
      </bit-form-field>
    }
    @if (!disabled()) {
      <bit-form-field class="tw-grow">
        <bit-label>{{ selectorLabelText() }}</bit-label>
        @if (!hideTable()) {
          <bit-multi-select
            class="tw-w-full"
            [attr.data-testid]="multiSelectTestId()"
            [baseItems]="selectionList.deselectedItems"
            [removeSelectedItems]="true"
            [disabled]="disabled()"
            (onItemsConfirmed)="selectItems($event)"
            (blur)="handleBlur()"
          />
        } @else {
          <bit-multi-select
            class="tw-w-full"
            [attr.data-testid]="multiSelectTestId()"
            [baseItems]="selectionList.allItems"
            [removeSelectedItems]="false"
            [disabled]="disabled()"
            [ngModel]="selectedItems()"
            [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="onInlineSelectionChange($event)"
            (onItemsConfirmed)="addItems($event)"
            (blur)="handleBlur()"
          />
        }
        @if (selectorHelpText()) {
          <bit-hint>{{ selectorHelpText() }}</bit-hint>
        }
      </bit-form-field>
    }
  </div>
}

@if (!hideTable()) {
  <bit-table [formGroup]="formGroup">
    <ng-container header>
      <tr>
        <th bitCell>{{ columnHeader() }}</th>
        @if (permissionMode() != "hidden") {
          <th bitCell id="permissionColHeading">
            <div class="tw-border tw-border-solid tw-border-transparent">
              {{ "permission" | i18n }}
            </div>
          </th>
        }
        @if (showMemberRoles()) {
          <th bitCell id="roleColHeading">{{ "role" | i18n }}</th>
        }
        @if (showGroupColumn()) {
          <th bitCell id="groupColHeading">{{ "group" | i18n }}</th>
        }
        <th bitCell class="tw-w-20"></th>
      </tr>
    </ng-container>
    <ng-template body formArrayName="items">
      @for (item of selectedItems(); track item; let i = $index) {
        <tr bitRow [formGroupName]="i" [ngClass]="{ 'tw-text-muted': item.readonly }">
          <td bitCell class="tw-w-5/12">
            @switch (item.type) {
              @case (itemType.Member) {
                <div class="tw-flex tw-items-center">
                  <i class="bwi tw-mr-3 {{ item.icon }}" aria-hidden="true"></i>
                  <div class="tw-flex tw-flex-col">
                    <div>
                      {{ item.labelName }}
                      @if ($any(item).status == 0) {
                        <span bitBadge variant="secondary">
                          {{ "invited" | i18n }}
                        </span>
                      }
                    </div>
                    @if ($any(item).status != 0 && item.labelName != $any(item).email) {
                      <div class="tw-text-xs tw-text-muted">
                        {{ $any(item).email }}
                      </div>
                    }
                  </div>
                </div>
              }
              @default {
                <div class="tw-flex tw-items-center">
                  <i
                    class="bwi tw-mr-3 tw-px-0.5 tw-text-2xl"
                    [ngClass]="item.icon || itemIcon(item)"
                    aria-hidden="true"
                  ></i>
                  <span>{{ item.labelName }}</span>
                </div>
              }
            }
          </td>
          @if (permissionMode() != "hidden") {
            <td bitCell>
              @if (canEditItemPermission(item)) {
                <bit-form-field>
                  <bit-select
                    bitInput
                    formControlName="permission"
                    appA11yTitle="{{ item.labelName }} {{ 'permission' | i18n }}"
                    [id]="'permission' + i"
                    (closed)="handleBlur()"
                  >
                    @for (p of permissionList; track p) {
                      <bit-option
                        [value]="p.perm"
                        [label]="p.labelId | vfo1I18n: p.vfo1LabelId ?? p.labelId"
                      />
                    }
                  </bit-select>
                </bit-form-field>
              } @else {
                @if (item.readonly || disabled()) {
                  <div
                    class="tw-max-w-40 tw-overflow-hidden tw-overflow-ellipsis tw-whitespace-nowrap tw-font-medium tw-text-muted"
                    [title]="readonlyPermissionLabel(item.readonlyPermission)"
                  >
                    {{ readonlyPermissionLabel(item.readonlyPermission) }}
                  </div>
                }
              }
            </td>
          }
          @if (showMemberRoles()) {
            <td bitCell>
              {{ $any(item).role | userType: "-" }}
            </td>
          }
          @if (showGroupColumn()) {
            <td bitCell>
              {{ $any(item).viaGroupName ?? "-" }}
            </td>
          }
          <td bitCell class="tw-text-right">
            @if (!disabled() && !item.readonly) {
              <button
                type="button"
                bitIconButton="bwi-close"
                buttonType="primaryGhost"
                label="{{ 'remove' | i18n }} {{ item.labelName }}"
                [disabled]="disabled()"
                (click)="deselectItem(item.id)"
              ></button>
            }
          </td>
        </tr>
      }
      @if (selectedItems().length == 0) {
        <tr>
          <td bitCell>{{ emptySelectionText() }}</td>
        </tr>
      }
    </ng-template>
  </bit-table>
}