<div class="tw-flex tw-flex-col tw-h-full">
  <bit-section
    disableMargin
    class="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>

  <div class="tw-h-full tw-items-start">
    <bit-section
      class="tw-flex tw-bg-background-alt tw-flex-col tw-justify-start tw-items-center tw-gap-2 tw-h-full tw-px-5"
    >
      <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">
          <b>{{ "passkeyAlreadyExists" | i18n }}</b>
          {{ "applicationDoesNotSupportDuplicates" | i18n }}
        </div>
        <button bitButton type="button" buttonType="primary" (click)="closeModal()">
          {{ "close" | i18n }}
        </button>
      </div>
    </bit-section>
  </div>
</div>
