<PageHeader as |p|>
  <p.top>
    <KmipBreadcrumb @scope={{this.scope}} @role={{this.role}} />
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3">
      Credentials
    </h1>
  </p.levelLeft>
</PageHeader>
<Toolbar>
  <ToolbarActions>
    {{#if this.model.deletePath.canDelete}}
      <ConfirmAction
        @buttonClasses="toolbar-link"
        @onConfirmAction={{this.revokeCredentials}}
        @confirmTitle="Revoke this?"
        @confirmMessage="Any client using these credentials will no longer be able to."
        @cancelButtonText="Cancel"
        @confirmButtonText="Revoke"
      >
        Revoke credentials
      </ConfirmAction>
      <div class="toolbar-separator"></div>
    {{/if}}
    <ToolbarLink @route="credentials.index" @models={{array this.scope this.role}} data-test-kmip-link-back-to-role>
      Back to role
    </ToolbarLink>
    <CopyButton
      class="toolbar-link"
      @clipboardText={{this.model.certificate}}
      @success={{action (set-flash-message "Certificate Copied!")}}
      data-test-copy-button
    >
      Copy certificate
      <Chevron />
    </CopyButton>
  </ToolbarActions>
</Toolbar>
<div class="box is-shadowless is-fullwidth is-sideless">
  <InfoTableRow @label="Serial number" @value={{this.model.id}}>
    <MaskedInput @value={{this.model.id}} @displayOnly={{true}} @allowCopy={{true}} />
  </InfoTableRow>
  <InfoTableRow @label="Private key" @value={{this.model.privateKey}}>
    <div class="is-block">
      <AlertBanner
        @type="warning"
        @message="You will not be able to access the private key later, so please copy the information below."
        data-test-warning
      />
      <MaskedInput
        @value={{this.model.privateKey}}
        @name="Private key"
        @allowCopy={{true}}
        @displayOnly={{true}}
        class="is-block"
      />
    </div>
  </InfoTableRow>
  <InfoTableRow @label="Certificate" @value={{this.model.certificate}}>
    <MaskedInput @value={{this.model.certificate}} @displayOnly={{true}} @allowCopy={{true}} />
  </InfoTableRow>
  <InfoTableRow @label="CA Chain" @value={{this.model.caChain}}>
    <div class="is-block">
      {{#each this.model.caChain as |chain|}}
        <MaskedInput @value={{chain}} @displayOnly={{true}} @allowCopy={{true}} />
      {{/each}}
    </div>
  </InfoTableRow>
</div>