<bit-section [formGroup]="itemDetailsForm">
  <bit-section-header>
    <h2 bitTypography="h6">{{ "itemDetails" | i18n }}</h2>
    <button
      *ngIf="!config.hideIndividualVaultFields"
      slot="end"
      type="button"
      size="small"
      [bitIconButton]="favoriteIcon"
      role="checkbox"
      [attr.aria-checked]="itemDetailsForm.value.favorite"
      [appA11yTitle]="'favorite' | i18n"
      (click)="toggleFavorite()"
    ></button>
  </bit-section-header>
  <bit-card>
    <bit-form-field>
      <bit-label>{{ "itemName" | i18n }}</bit-label>
      <input bitInput formControlName="name" />
    </bit-form-field>
    <div class="tw-grid tw-grid-cols-2 tw-gap-1">
      <bit-form-field
        *ngIf="showOwnership"
        [disableMargin]="!showCollectionsControl"
        [class.tw-col-span-2]="config.hideIndividualVaultFields"
      >
        <bit-label>{{ "owner" | i18n }}</bit-label>
        <bit-select formControlName="organizationId">
          <bit-option
            *ngIf="showPersonalOwnerOption"
            [value]="null"
            [label]="userEmail$ | async"
          ></bit-option>
          <bit-option
            *ngFor="let org of config.organizations"
            [value]="org.id"
            [label]="org.name"
          ></bit-option>
        </bit-select>
      </bit-form-field>
      <bit-form-field
        [class.tw-col-span-2]="!showOwnership"
        [disableMargin]="!showCollectionsControl"
        *ngIf="!config.hideIndividualVaultFields"
      >
        <bit-label>{{ "folder" | i18n }}</bit-label>
        <bit-select formControlName="folderId">
          <bit-option
            *ngFor="let folder of config.folders"
            [value]="folder.id"
            [label]="folder.name"
          ></bit-option>
        </bit-select>
      </bit-form-field>
    </div>
    <ng-container *ngIf="showCollectionsControl">
      <bit-form-field class="tw-w-full" disableMargin>
        <bit-label>{{ "collections" | i18n }}</bit-label>
        <bit-multi-select
          class="tw-w-full"
          formControlName="collectionIds"
          [baseItems]="collectionOptions"
        ></bit-multi-select>
        <bit-hint *ngIf="readOnlyCollections.length > 0" data-testid="view-only-hint">
          {{ "cannotRemoveViewOnlyCollections" | i18n: readOnlyCollections.join(", ") }}
        </bit-hint>
      </bit-form-field>
    </ng-container>
  </bit-card>
</bit-section>
