<section class="tw-mb-5 bit-compact:tw-mb-4">
  <bit-section-header>
    <h2 bitTypography="h6">{{ setSectionTitle }}</h2>
  </bit-section-header>
  <read-only-cipher-card>
    @if (card.cardholderName) {
      <bit-form-field>
        <bit-label [appTextDrag]="card.cardholderName">{{ "cardholderName" | i18n }}</bit-label>
        <input
          id="cardholderName"
          readonly
          bitInput
          type="text"
          [value]="card.cardholderName"
          aria-readonly="true"
          data-testid="cardholder-name"
        />
        <button
          bitIconButton="bwi-clone"
          bitSuffix
          type="button"
          [appCopyClick]="card.cardholderName"
          showToast
          [valueLabel]="'cardholderName' | i18n"
          [label]="'copyCardholderName' | i18n"
          data-testid="copy-cardholder-name"
        ></button>
      </bit-form-field>
    }
    @if (card.number) {
      <bit-form-field>
        <bit-label [appTextDrag]="card.number">{{ "number" | i18n }}</bit-label>
        <input
          id="cardNumber"
          readonly
          bitInput
          type="password"
          [value]="card.number | creditCardNumber: cipher.card.brand"
          aria-readonly="true"
          data-testid="cardholder-number"
          class="tw-font-mono"
        />
        <button
          bitSuffix
          type="button"
          bitIconButton
          bitPasswordInputToggle
          data-testid="toggle-number"
          [toggled]="revealCardNumber"
          (toggledChange)="logCardEvent($event, EventType.Cipher_ClientToggledCardNumberVisible)"
        ></button>
        <button
          bitIconButton="bwi-clone"
          bitSuffix
          type="button"
          [appCopyClick]="card.number"
          showToast
          [valueLabel]="'number' | i18n"
          [label]="'copyNumber' | i18n"
          data-testid="copy-number"
        ></button>
      </bit-form-field>
    }
    @if (card.expiration) {
      <bit-form-field>
        <bit-label [appTextDrag]="card.expiration">{{ "expiration" | i18n }}</bit-label>
        <input
          id="expiration"
          readonly
          bitInput
          type="text"
          [value]="card.expiration"
          aria-readonly="true"
          data-testid="cardholder-expiration"
        />
      </bit-form-field>
    }
    @if (card.code) {
      <bit-form-field>
        <bit-label [appTextDrag]="card.code">{{ "securityCode" | i18n }}</bit-label>
        <input
          id="securityCode"
          readonly
          bitInput
          type="password"
          [value]="card.code"
          aria-readonly="true"
          data-testid="cardholder-code"
          class="tw-font-mono"
        />
        <button
          bitSuffix
          type="button"
          bitIconButton
          bitPasswordInputToggle
          data-testid="toggle-code"
          [toggled]="revealCardCode"
          (toggledChange)="logCardEvent($event, EventType.Cipher_ClientToggledCardCodeVisible)"
        ></button>
        <button
          bitIconButton="bwi-clone"
          bitSuffix
          type="button"
          [appCopyClick]="card.code"
          showToast
          [valueLabel]="'securityCode' | i18n"
          [label]="'copySecurityCode' | i18n"
          data-testid="copy-code"
          (click)="logCardEvent(true, EventType.Cipher_ClientCopiedCardCode)"
        ></button>
      </bit-form-field>
    }
  </read-only-cipher-card>
</section>
