<div class="tw-flex tw-flex-col tw-h-full">
  <bit-section
    disableMargin
    class="tw-sticky tw-top-0 tw-z-10 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
  >
    <bit-section-header class="tw-app-region-drag tw-bg-background">
      <div class="tw-flex tw-items-center">
        <bit-svg [content]="Icons.BitwardenShield" class="tw-w-10 tw-mt-2 tw-ml-2"></bit-svg>

        <h2 bitTypography="h4" class="tw-font-semibold tw-text-lg">{{ "passkeyLogin" | i18n }}</h2>
      </div>
      <button
        type="button"
        bitIconButton="bwi-close"
        slot="end"
        class="tw-app-region-no-drag tw-mb-4 tw-mr-2"
        (click)="closeModal()"
        [label]="'close' | i18n"
      >
        {{ "close" | i18n }}
      </button>
    </bit-section-header>
  </bit-section>

  <bit-section class="tw-bg-background-alt tw-p-4 tw-flex tw-flex-col tw-grow">
    <bit-item *ngFor="let c of ciphers$ | async" class="">
      <button type="button" bit-item-content (click)="chooseCipher(c)">
        <app-vault-icon [cipher]="c" slot="start"></app-vault-icon>
        <button bitLink [title]="c.name" type="button">
          {{ c.name }}
        </button>
        <span slot="secondary">{{ c.subTitle }}</span>
        <span bitBadge slot="end">{{ "select" | i18n }}</span>
      </button>
    </bit-item>
  </bit-section>
</div>
