<ng-container [formGroup]="uriForm">
  <div class="tw-flex tw-flex-1" [class.!tw-mb-1]="showMatchDetection">
    <bit-form-field disableMargin class="tw-flex-1 !tw-pt-0">
      <bit-label>{{ uriLabel }}</bit-label>
      <input bitInput formControlName="uri" #uriInput />
      <button
        type="button"
        [bitIconButton]="showMatchDetection ? 'bwi-cog-f' : 'bwi-cog'"
        bitSuffix
        [label]="toggleTitle"
        (click)="toggleMatchDetection()"
        data-testid="toggle-match-detection-button"
      ></button>
      @if (canRemove) {
        <button
          type="button"
          bitIconButton="bwi-minus-circle"
          buttonType="dangerGhost"
          bitSuffix
          [label]="'deleteWebsite' | i18n"
          (click)="removeUri()"
          data-testid="remove-uri-button"
        ></button>
      }
    </bit-form-field>
    @if (canReorder) {
      <div class="tw-flex tw-items-center tw-ml-1.5 tw-self-end tw-min-h-10">
        <button
          role="application"
          type="button"
          bitIconButton="bwi-drag-and-drop"
          class="!tw-py-0 !tw-px-1"
          cdkDragHandle
          [label]="'reorderToggleButton' | i18n: uriLabel"
          (keydown)="handleKeydown($event)"
          data-testid="reorder-toggle-button"
        ></button>
      </div>
    }
  </div>
  @if (showMatchDetection) {
    <bit-form-field class="!tw-mb-0">
      <bit-label>{{ "matchDetection" | i18n }}</bit-label>
      <bit-select formControlName="matchDetection" #matchDetectionSelect>
        @for (o of uriMatchOptions; track o.value) {
          <bit-option [label]="o.label" [value]="o.value" [disabled]="o.disabled"></bit-option>
        }
      </bit-select>
      @if (getMatchHints(); as hints) {
        <bit-hint>
          {{ hints[0] | i18n }}
          @if (hints.length > 1) {
            <b>{{ "warningCapitalized" | i18n }}:</b>
            {{ hints[1] | i18n }}
          }
        </bit-hint>
      }
    </bit-form-field>
  }
</ng-container>
