<section [formGroup]="sshKeyForm" class="tw-mb-5 bit-compact:tw-mb-4">
  <bit-section-header>
    <h2 bitTypography="h6">
      {{ "typeSshKey" | i18n }}
    </h2>
  </bit-section-header>
  <bit-card>
    <bit-form-field>
      <bit-label>{{ "sshPrivateKey" | i18n }}</bit-label>
      <input id="privateKey" bitInput formControlName="privateKey" type="password" readonly />
      <button
        type="button"
        bitIconButton
        bitSuffix
        data-testid="toggle-privateKey-visibility"
        bitPasswordInputToggle
      ></button>
      @if (showImport()) {
        <button
          type="button"
          bitIconButton="bwi-import"
          bitSuffix
          data-testid="import-privateKey"
          label="{{ 'importSshKeyFromClipboard' | i18n }}"
          (click)="importSshKeyFromClipboard()"
        ></button>
      }
    </bit-form-field>

    <bit-form-field>
      <bit-label>{{ "sshPublicKey" | i18n }}</bit-label>
      <input id="publicKey" bitInput formControlName="publicKey" readonly />
    </bit-form-field>

    <bit-form-field>
      <bit-label>{{ "sshFingerprint" | i18n }}</bit-label>
      <input id="keyFingerprint" bitInput formControlName="keyFingerprint" readonly />
    </bit-form-field>
  </bit-card>
</section>
