<section class="tw-mb-5 bit-compact:tw-mb-4" [formGroup]="autofillOptionsForm">
  <bit-section-header>
    <h2 bitTypography="h6">
      {{ "autofillOptions" | i18n }}
    </h2>
  </bit-section-header>

  <bit-card cdkDropList (cdkDropListDropped)="onUriItemDrop($event)">
    <ng-container formArrayName="uris">
      @for (uri of uriControls; track uri; let i = $index) {
        <vault-autofill-uri-option
          cdkDrag
          [cdkDragDisabled]="uriControls.length <= 1 || autofillOptionsForm.disabled"
          [formControlName]="i"
          (remove)="removeUri(i)"
          (onKeydown)="onUriItemKeydown($event, i)"
          [canReorder]="uriControls.length > 1 && autofillOptionsForm.enabled"
          [canRemove]="uriControls.length > 1 && autofillOptionsForm.enabled"
          [defaultMatchDetection]="defaultMatchDetection$ | async"
          [index]="i"
          [showAppLabel]="showAddAppDropdown()"
        ></vault-autofill-uri-option>
      }
    </ng-container>

    @if (autofillOptionsForm.enabled) {
      @if (showAddAppDropdown()) {
        <button
          type="button"
          bitLink
          linkType="primary"
          [class.tw-mb-6]="autofillOnPageLoadEnabled$ | async"
          startIcon="bwi-plus"
          [bitMenuTriggerFor]="addUriMenu"
        >
          {{ "addWebsiteOrApp" | i18n }}
        </button>
        <bit-menu #addUriMenu>
          <button
            type="button"
            bitMenuItem
            (click)="addUri({ uri: null, matchDetection: null }, true)"
          >
            {{ "website" | i18n }}
          </button>
          <button
            type="button"
            bitMenuItem
            (click)="addUri({ uri: desktopAppUriPrefix, matchDetection: null }, true)"
          >
            {{ "app" | i18n }}
          </button>
        </bit-menu>
      } @else {
        <button
          type="button"
          bitLink
          linkType="primary"
          [class.tw-mb-6]="autofillOnPageLoadEnabled$ | async"
          (click)="addUri({ uri: null, matchDetection: null }, true)"
          startIcon="bwi-plus"
        >
          {{ "addWebsite" | i18n }}
        </button>
      }
    }

    @if (autofillOnPageLoadEnabled$ | async) {
      <bit-form-field disableMargin>
        <bit-label>{{ "autoFillOnPageLoad" | i18n }}</bit-label>
        <bit-select formControlName="autofillOnPageLoad" [items]="autofillOptions"></bit-select>
      </bit-form-field>
    }
  </bit-card>
</section>
