<form [formGroup]="formGroup" [bitSubmit]="submit" id="assign_collections_form">
  @if (!vfo1TerminologyService.enabled()) {
    <p>
      {{
        (personalItemsCount === 1
          ? "bulkCollectionAssignmentDialogDescriptionSingular"
          : "bulkCollectionAssignmentDialogDescriptionPlural"
        ) | i18n
      }}
    </p>

    <ul class="tw-list-disc tw-pl-5 tw-space-y-2 tw-break-words">
      @if (readonlyItemCount > 0) {
        <li>
          <p>
            {{ "bulkCollectionAssignmentWarning" | i18n: totalItemCount : readonlyItemCount }}
          </p>
        </li>
      }
      @if (personalItemsCount > 0) {
        <li>
          <p>
            {{ transferWarningText(orgName, personalItemsCount) }}
          </p>
        </li>
      }
    </ul>
  } @else {
    <p class="tw-text-muted">
      @if (personalItemsCount > 0) {
        @let warning = transferWarningSegments(orgName, personalItemsCount);
        @if (warning.italicize) {
          {{ warning.before }}<span class="tw-italic">{{ warning.orgName }}</span
          >{{ warning.after }}
        } @else {
          {{ warning.text }}
        }
      }
      {{
        (totalItemCount === 1
          ? "bulkVaultSharedFolderAssignmentDialogDescriptionSingular"
          : "bulkVaultSharedFolderAssignmentDialogDescriptionPlural"
        ) | i18n
      }}
      @if (readonlyItemCount > 0) {
        {{ "bulkCollectionAssignmentWarning" | i18n: totalItemCount : readonlyItemCount }}
      }
    </p>
  }

  @if (showOrgSelector) {
    <div class="tw-flex">
      <bit-form-field class="tw-grow tw-max-w-full">
        <bit-label>{{ "moveToOrganization" | vfo1I18n: "vault" }}</bit-label>
        <bit-select formControlName="selectedOrg">
          @for (org of organizations$ | async; track org.id) {
            <bit-option
              [icon]="vfo1TerminologyService.enabled() ? getOrgIcon(org) : 'bwi-business'"
              [value]="org.id"
              [label]="org.name"
            >
            </bit-option>
          }
        </bit-select>
      </bit-form-field>
    </div>
  }

  <div class="tw-flex">
    <bit-form-field class="tw-grow tw-max-w-full" disableMargin>
      <bit-label>{{ "selectCollectionsToAssign" | vfo1I18n: "sharedFolder" }}</bit-label>
      <bit-multi-select
        class="tw-w-full"
        formControlName="collections"
        [baseItems]="availableCollections"
      ></bit-multi-select>
      @if (readOnlyCollectionNames.length > 0) {
        <bit-hint data-testid="view-only-hint">
          {{
            "cannotRemoveViewOnlyCollections"
              | vfo1I18n: "cannotRemoveViewOnlySharedFolders" : readOnlyCollectionNames.join(", ")
          }}
        </bit-hint>
      }
    </bit-form-field>
  </div>
</form>
