<Toolbar>
  <ToolbarActions>
    {{#if @canDelete}}
      <ConfirmAction
        @buttonClasses="toolbar-link"
        @onConfirmAction={{this.deleteKey}}
        @confirmTitle="Delete key?"
        @confirmButtonText="Delete"
        data-test-pki-key-delete
      >
        Delete
      </ConfirmAction>
      <div class="toolbar-separator"></div>
    {{/if}}
    {{#if @key.privateKey}}
      <DownloadButton
        class="toolbar-link"
        @filename="{{@key.backend}}-{{or @key.keyName 'private-key'}}"
        @data={{@key.privateKey}}
        @extension="pem"
      >
        Download private key
        <Chevron @isButton={{true}} />
      </DownloadButton>
    {{/if}}
    {{#if @canEdit}}
      <ToolbarLink @route="keys.key.edit" @model={{@key.keyId}} data-test-pki-key-edit>
        Edit key
      </ToolbarLink>
    {{/if}}
  </ToolbarActions>
</Toolbar>

<div class="box is-fullwidth is-sideless is-paddingless is-marginless">
  {{#if @key.privateKey}}
    <div class="has-top-margin-m">
      <AlertBanner
        @title="Next steps"
        @type="warning"
        @message="This private key material will only be available once. Copy or download it now."
      />
    </div>
  {{/if}}
  {{#each @key.formFields as |attr|}}
    <InfoTableRow
      @label={{capitalize (or attr.options.detailsLabel attr.options.label (humanize (dasherize attr.name)))}}
      @value={{get @key attr.name}}
    />
  {{/each}}
  {{#if @key.privateKey}}
    <InfoTableRow @label="Private key">
      <MaskedInput @value={{@key.privateKey}} @name="Private key" @displayOnly={{true}} @allowCopy={{true}} />
    </InfoTableRow>
  {{/if}}
</div>