<div class="tw-flex tw-flex-col tw-h-full tw-bg-background-alt">
  <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">
          {{ "savePasskeyQuestion" | 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">
    <div *ngIf="(ciphers$ | async)?.length === 0; else hasCiphers">
      <div class="tw-flex tw-items-center tw-flex-col tw-p-12 tw-gap-4">
        <bit-svg [content]="Icons.NoResults" class="tw-text-main"></bit-svg>
        <div class="tw-flex tw-flex-col tw-gap-2">
          {{ "noMatchingLoginsForSite" | i18n }}
        </div>
        <button bitButton type="button" buttonType="primary" (click)="confirmPasskey()">
          {{ "savePasskeyNewLogin" | i18n }}
        </button>
      </div>
    </div>
    <ng-template #hasCiphers>
      <bit-item *ngFor="let c of ciphers$ | async" class="">
        <button type="button" bit-item-content (click)="addCredentialToCipher(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">{{ "save" | i18n }}</span>
        </button>
      </bit-item>
      <bit-item class="">
        <button
          bitLink
          linkType="primary"
          type="button"
          bit-item-content
          (click)="confirmPasskey()"
        >
          <a bitLink linkType="primary" class="tw-font-medium tw-text-base">
            {{ "saveNewPasskey" | i18n }}
          </a>
        </button>
      </bit-item>
    </ng-template>
  </bit-section>
</div>
