<Toolbar>
  <ToolbarActions>
    {{#if @canImportKey}}
      <ToolbarLink @route="keys.import" @type="download" data-test-pki-key-import>
        Import
      </ToolbarLink>
    {{/if}}
    {{#if @canGenerateKey}}
      <ToolbarLink @route="keys.create" @type="add" data-test-pki-key-generate>
        Generate
      </ToolbarLink>
    {{/if}}
  </ToolbarActions>
</Toolbar>
<p class="has-padding">Below is information about the private keys used by the issuers to sign certificates. While
  certificates represent a public assertion of an identity, private keys represent the private part of that identity, a
  secret used to prove who they are and who they trust.</p>

{{#if @keyModels.length}}
  {{#each @keyModels as |pkiKey|}}
    <LinkedBlock class="list-item-row" @params={{array "keys.key.details" pkiKey.keyId}} @linkPrefix={{@mountPoint}}>
      <div class="level is-mobile">
        <div class="level-left">
          <div>
            <Icon @name="certificate" class="has-text-grey-light" />
            <span class="has-text-weight-semibold is-underline" data-test-key={{if pkiKey.keyName "name" "id"}}>
              {{or pkiKey.keyName pkiKey.id}}
            </span>
            <div class="is-flex-row has-left-margin-l has-top-margin-xs">
              {{#if pkiKey.keyName}}
                <span class="tag has-text-grey-dark" data-test-key="id">{{pkiKey.id}}</span>
              {{/if}}
            </div>
          </div>
        </div>
        <div class="level-right is-flex is-paddingless is-marginless">
          <div class="level-item">
            <PopupMenu>
              <nav class="menu">
                <ul class="menu-list">
                  <li>
                    <LinkTo
                      @route="keys.key.details"
                      @model={{pkiKey.keyId}}
                      @disabled={{not @canRead}}
                      data-test-key-menu-link="details"
                    >
                      Details
                    </LinkTo>
                  </li>
                  <li>
                    <LinkTo
                      @route="keys.key.edit"
                      @model={{pkiKey.keyId}}
                      @disabled={{not @canEdit}}
                      data-test-key-menu-link="edit"
                    >
                      Edit
                    </LinkTo>
                  </li>
                </ul>
              </nav>
            </PopupMenu>
          </div>
        </div>
      </div>
    </LinkedBlock>
  {{/each}}
{{else}}
  <EmptyState @title="No keys yet" @message="There are no keys in this PKI mount. You can generate or create one." />
{{/if}}