<section class="tw-mb-5 bit-compact:tw-mb-4">
  <bit-section-header>
    <h2 bitTypography="h6">{{ "autofillOptions" | i18n }}</h2>
  </bit-section-header>
  <bit-card>
    @for (login of loginUris; track $index; let last = $last) {
      <ng-container>
        <bit-form-field [disableMargin]="last" data-testid="autofill-view-list">
          <bit-label>
            {{ "website" | i18n }}
          </bit-label>
          <input
            readonly
            bitInput
            type="text"
            [value]="login.hostOrUri"
            aria-readonly="true"
            data-testid="login-website"
          />
          <button
            bitIconButton="bwi-external-link"
            bitSuffix
            type="button"
            (click)="openWebsite(login.launchUri)"
            data-testid="launch-website"
            [label]="('launch' | i18n) + ' ' + login.hostOrUri"
          ></button>
          <button
            bitIconButton="bwi-clone"
            bitSuffix
            type="button"
            [appCopyClick]="login.uri"
            [valueLabel]="'website' | i18n"
            showToast
            [label]="'copyWebsite' | i18n"
            data-testid="copy-website"
          ></button>
        </bit-form-field>
      </ng-container>
    }
  </bit-card>
</section>
