<SecretListHeader
  @model={{this.model.parentModel}}
  @backendCrumb={{hash
    label=this.model.parentModel.id
    text=this.model.parentModel.id
    path="vault.cluster.secrets.backend.list-root"
    model=this.model.parentModel.id
  }}
  @isEngine={{true}}
/>
<Toolbar>
  <ToolbarActions>
    <ToolbarLink @route="issuers.import" data-test-generate-issuer="import">
      Import
    </ToolbarLink>
    <BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
      <D.Trigger
        class={{concat "toolbar-link" (if D.isOpen " is-active")}}
        @htmlTag="button"
        data-test-issuer-generate-dropdown
      >
        Generate
        <Chevron @direction="down" @isButton={{true}} />
      </D.Trigger>
      <D.Content @defaultClass="popup-menu-content">
        <nav class="box menu" aria-label="generate options">
          <ul class="menu-list">
            <li class="action">
              <LinkTo @route="issuers.generate-root" {{on "click" (fn this.onLinkClick D)}} data-test-generate-issuer="root">
                Root
              </LinkTo>
            </li>
            <li class="action">
              <LinkTo
                @route="issuers.generate-intermediate"
                {{on "click" (fn this.onLinkClick D)}}
                data-test-generate-issuer="intermediate"
              >
                Intermediate CSR
              </LinkTo>
            </li>
          </ul>
        </nav>
      </D.Content>
    </BasicDropdown>
  </ToolbarActions>
</Toolbar>
{{#if this.model.issuersModel.length}}
  {{#each this.model.issuersModel as |pkiIssuer|}}
    <LinkedBlock
      class="list-item-row"
      @params={{array "issuers.issuer.details" pkiIssuer.id}}
      @linkPrefix={{this.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">
              {{pkiIssuer.issuerRef}}
            </span>
            <div class="is-flex-row has-left-margin-l has-top-margin-xs">
              {{#if pkiIssuer.isDefault}}
                <span class="tag has-text-grey-dark">default issuer</span>
              {{/if}}
              {{#if pkiIssuer.issuerName}}
                <span class="tag has-text-grey-dark">{{pkiIssuer.id}}</span>
              {{/if}}
            </div>
          </div>
        </div>
        <div class="level-right is-flex is-paddingless is-marginless">
          <div class="level-item">
            <PopupMenu>
              <nav class="menu" aria-label="issuer config options">
                <ul class="menu-list">
                  <li>
                    <LinkTo @route="issuers.issuer.details" @model={{pkiIssuer.id}}>
                      Details
                    </LinkTo>
                  </li>
                  <li>
                    <LinkTo @route="issuers.issuer.edit" @model={{pkiIssuer.id}}>
                      Edit
                    </LinkTo>
                  </li>
                </ul>
              </nav>
            </PopupMenu>
          </div>
        </div>
      </div>
    </LinkedBlock>
  {{/each}}
{{else}}
  <EmptyState @title="PKI not configured" @message="This PKI mount hasn't yet been configured with a certificate issuer.">
    <LinkTo @route="configuration.create">
      Configure PKI
    </LinkTo>
  </EmptyState>
{{/if}}