{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}

<form data-test-transit-create-form onsubmit={{@createOrUpdateKey}}>
  <div class="box is-sideless is-fullwidth is-marginless">
    <MessageError @model={{@key}} @errorMessage={{@errorMessage}} />
    <NamespaceReminder @mode="create" @noun="transit key" />
    <div class="field">
      <label for="key-name" class="is-label">Name</label>
      <Input id="key-name" @value={{@key.name}} class="input" data-test-transit-key="name" />
    </div>
    <div class="field">
      <TtlPicker
        @initialValue="30d"
        @initialEnabled={{false}}
        @label="Auto-rotation period"
        @helperTextDisabled="Key will never be automatically rotated"
        @helperTextEnabled="Key will be automatically rotated every"
        @onChange={{@handleAutoRotateChange}}
        @errorMessage={{if @autoRotateInvalid "Duration must be longer than 1 hour"}}
      />
    </div>
    <div class="field">
      <label for="key-type" class="is-label">Type</label>
      <div class="control is-expanded">
        <div class="select is-fullwidth">
          <select
            name="key-type"
            id="key-type"
            onchange={{action (mut @key.type) value="target.value"}}
            data-test-transit-key="type"
          >
            <option selected={{eq @key.type "aes128-gcm96"}} value="aes128-gcm96">
              aes128-gcm96
            </option>
            <option selected={{eq @key.type "aes256-gcm96"}} value="aes256-gcm96">
              aes256-gcm96
            </option>
            <option selected={{eq @key.type "chacha20-poly1305"}} value="chacha20-poly1305">
              chacha20-poly1305
            </option>
            <option selected={{eq @key.type "ecdsa-p256"}} value="ecdsa-p256">
              ecdsa-p256
            </option>
            <option selected={{eq @key.type "ecdsa-p384"}} value="ecdsa-p384">
              ecdsa-p384
            </option>
            <option selected={{eq @key.type "ecdsa-p521"}} value="ecdsa-p521">
              ecdsa-p521
            </option>
            <option selected={{eq @key.type "ed25519"}} value="ed25519">
              ed25519
            </option>
            <option selected={{eq @key.type "rsa-2048"}} value="rsa-2048">
              rsa-2048
            </option>
            <option selected={{eq @key.type "rsa-3072"}} value="rsa-3072">
              rsa-3072
            </option>
            <option selected={{eq @key.type "rsa-4096"}} value="rsa-4096">
              rsa-4096
            </option>
          </select>
        </div>
      </div>
    </div>
    <div class="field">
      <div class="b-checkbox">
        <input
          type="checkbox"
          id="key-exportable"
          class="styled"
          checked={{@key.exportable}}
          onchange={{@setValueOnKey}}
          data-test-transit-key="exportable"
        />
        <label for="key-exportable" class="is-label">
          Exportable
        </label>
      </div>
    </div>
    {{#if
      (or
        (eq @key.type "aes128-gcm96")
        (eq @key.type "aes256-gcm96")
        (eq @key.type "chacha20-poly1305")
        (eq @key.type "ed25519")
      )
    }}
      <div class="field">
        <div class="b-checkbox">
          <input
            type="checkbox"
            id="key-derived"
            class="styled"
            checked={{@key.derived}}
            onchange={{@derivedChange}}
            data-test-transit-key="derived"
          />
          <label for="key-derived" class="is-label">
            Derived
          </label>
        </div>
      </div>
    {{/if}}
    {{#if (or (eq @key.type "aes128-gcm96") (eq @key.type "aes256-gcm96") (eq @key.type "chacha20-poly1305"))}}
      <div class="field">
        <div class="b-checkbox">
          <input
            type="checkbox"
            data-test-transit-key="convergent-encryption"
            id="key-convergent"
            class="styled"
            checked={{@key.convergentEncryption}}
            onchange={{@convergentEncryptionChange}}
          />
          <label for="key-convergent" class="is-label">
            Enable convergent encryption
          </label>
        </div>
      </div>
    {{/if}}
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <Hds::ButtonSet>
      <Hds::Button
        @text="Create key"
        @icon={{if @requestInFlight "loading"}}
        data-test-transit-key="create"
        type="submit"
        disabled={{@requestInFlight}}
      />
      <Hds::Button
        @text="Cancel"
        @color="secondary"
        @model={{@key.backend}}
        @route="vault.cluster.secrets.backend.list-root"
      />
    </Hds::ButtonSet>
  </div>
</form>