<form
  onsubmit={{action
    @doSubmit
    (hash param=(compact (array @exportKeyType (if this.exportVersion @exportKeyVersion))))
    (hash wrapTTL=this.wrapTTL)
  }}
>
  <div class="box is-sideless is-fullwidth is-marginless">
    <div class="content">
      <p>Export a key using <code>{{@key.name}}</code> as the encryption key.</p>
    </div>
    <div class="field">
      <label for="type" class="is-label">Key type</label>
      <div class="control is-expanded">
        <div class="select is-fullwidth">
          <select name="type" id="type" onchange={{action (mut @exportKeyType) value="target.value"}}>
            {{#each @key.exportKeyTypes as |currOption|}}
              <option selected={{eq @exportKeyType currOption}} value={{currOption}}>
                <code>{{currOption}}</code>
              </option>
            {{/each}}
          </select>
        </div>
      </div>
    </div>
    <div class="field">
      <div class="b-checkbox">
        <Input @type="checkbox" name="exportVersion" id="exportVersion" class="styled" @checked={{this.exportVersion}} />
        <label for="exportVersion" class="is-label">
          Export a single version
        </label>
      </div>
      {{#if this.exportVersion}}
        <div class="field">
          <label for="version" class="is-label">Version</label>
          <div class="control is-expanded">
            <div class="select is-fullwidth">
              <select name="version" id="version" onchange={{action (mut @exportKeyVersion) value="target.value"}}>
                {{#each @key.validKeyVersions as |versionOption|}}
                  <option selected={{eq @exportKeyVersion versionOption}} value={{versionOption}}>
                    <code>{{versionOption}}</code>
                    {{#if (eq @key.validKeyVersions.lastObject versionOption)}}
                      <span> (latest) </span>
                    {{/if}}
                  </option>
                {{/each}}
              </select>
            </div>
          </div>
        </div>
      {{/if}}
    </div>
    <WrapTtl @onChange={{action (mut this.wrapTTL)}} />
  </div>
  <div class="field is-grouped box is-fullwidth is-bottomless">
    <div class="control">
      <button type="submit" class="button is-primary">
        Export key
      </button>
    </div>
  </div>
</form>
<Modal @title="Copy your wrapped key" @onClose={{action (mut @isModalActive) false}} @isActive={{@isModalActive}}>
  <section class="modal-card-body">
    <div class="box is-shadowless is-fullwidth is-sideless">
      <h2 class="title is-6">Wrapped Key</h2>
      <div class="copy-text level">
        <pre data-test-encrypted-value="export" class="level-left">{{if this.wrapTTL @wrappedToken (stringify @keys)}}</pre>
        <CopyButton
          class="button is-compact is-transparent level-right"
          data-test-button="modal-copy"
          @clipboardText={{if this.wrapTTL @wrappedToken (stringify @keys)}}
          @buttonType="button"
          @success={{action (set-flash-message "Token copied!")}}
        >
          <Icon @name="clipboard-copy" aria-label="Copy" />
        </CopyButton>
      </div>
    </div>
  </section>
  <footer class="modal-card-foot">
    <CopyButton
      class="button is-primary copy-close"
      data-test-button="modal-copy-close"
      @clipboardText={{if this.wrapTTL @wrappedToken (stringify @keys)}}
      @buttonType="button"
      @success={{action @toggleModal "Token copied!"}}
    >
      Copy &amp; Close
    </CopyButton>
  </footer>
</Modal>