<bit-dialog dialogSize="large">
  <span bitDialogTitle>
    {{ "assignToCollections" | i18n }}
    <span class="tw-text-sm tw-normal-case tw-text-muted">
      {{ pluralize(editableItemCount, "item", "items") }}
    </span>
  </span>

  <div bitDialogContent>
    <p>{{ "bulkCollectionAssignmentDialogDescription" | i18n }}</p>

    <p *ngIf="readonlyItemCount > 0">
      {{ "bulkCollectionAssignmentWarning" | i18n: totalItemCount : readonlyItemCount }}
    </p>

    <div class="tw-flex">
      <bit-form-field class="tw-grow">
        <bit-label>{{ "selectCollectionsToAssign" | i18n }}</bit-label>
        <bit-multi-select
          class="tw-w-full"
          [baseItems]="availableCollections"
          [removeSelectedItems]="true"
          (onItemsConfirmed)="selectCollections($event)"
        ></bit-multi-select>
      </bit-form-field>
    </div>

    <bit-table>
      <ng-container header>
        <td bitCell>{{ "assignToTheseCollections" | i18n }}</td>
        <td bitCell class="tw-w-20"></td>
      </ng-container>
      <ng-template body>
        <tr bitRow *ngFor="let item of selectedCollections; let i = index">
          <td bitCell>
            <i class="bwi bwi-collection" aria-hidden="true"></i>
            {{ item.labelName }}
          </td>
          <td bitCell class="tw-text-right">
            <button
              type="button"
              bitIconButton="bwi-close"
              buttonType="muted"
              appA11yTitle="{{ 'remove' | i18n }} {{ item.labelName }}"
              (click)="unselectCollection(i)"
            ></button>
          </td>
        </tr>
        <tr *ngIf="selectedCollections.length == 0">
          <td bitCell>
            {{ "noCollectionsAssigned" | i18n }}
          </td>
        </tr>
      </ng-template>
    </bit-table>
  </div>

  <ng-container bitDialogFooter>
    <button type="submit" bitButton buttonType="primary" [bitAction]="submit" [disabled]="!isValid">
      {{ "assign" | i18n }}
    </button>
    <button type="button" bitButton buttonType="secondary" bitDialogClose>
      {{ "cancel" | i18n }}
    </button>
  </ng-container>
</bit-dialog>
