<section
  class="tw-mb-5 bit-compact:tw-mb-4"
  [ngClass]="{ 'tw-mb-0': disableSectionMargin && !hasCustomFields }"
  [formGroup]="additionalOptionsForm"
>
  <bit-section-header>
    <h2 bitTypography="h6">{{ "additionalOptions" | i18n }}</h2>
  </bit-section-header>

  <bit-card>
    <bit-form-field>
      <bit-label>{{ "notes" | i18n }}</bit-label>
      <textarea bitInput rows="5" formControlName="notes"></textarea>
    </bit-form-field>
    @if (passwordRepromptEnabled$ | async) {
      <bit-form-control [disableMargin]="hasCustomFields || isPartialEdit">
        <input type="checkbox" bitCheckbox formControlName="reprompt" />
        <bit-label>{{ "passwordPrompt" | i18n }}</bit-label>
      </bit-form-control>
    }

    @if (!hasCustomFields && !isPartialEdit && allowNewField) {
      <button
        bitLink
        startIcon="bwi-plus"
        type="button"
        linkType="primary"
        (click)="addCustomField()"
      >
        {{ "addField" | i18n }}
      </button>
    }
  </bit-card>
</section>

<vault-custom-fields
  (numberOfFieldsChange)="handleCustomFieldChange($event)"
  [disableSectionMargin]="disableSectionMargin"
></vault-custom-fields>
