<PkiPaginatedList @listRoute="issuers.index" @list={{@issuers}}>
  <:actions>
    <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>
  </:actions>
  <:list as |issuers|>
    {{#each issuers as |pkiIssuer idx|}}
      <LinkedBlock class="list-item-row" @params={{array "issuers.issuer.details" pkiIssuer.id}} @linkPrefix={{@mountPoint}}>
        <div class="level is-mobile">
          <div class="level-left">
            <div data-test-issuer-list={{pkiIssuer.id}}>
              <Icon @name="certificate" class="has-text-grey-light" />
              <span class="has-text-weight-semibold is-underline">
                {{pkiIssuer.issuerRef}}
                {{#if pkiIssuer.issuerName}}
                  <span class="tag has-text-grey-dark">{{pkiIssuer.id}}</span>
                {{/if}}
              </span>
              <div class="is-flex-row has-left-margin-l has-top-margin-xs">
                {{#if pkiIssuer.isDefault}}
                  <span class="tag has-text-grey-dark" data-test-is-default={{idx}}>default issuer</span>
                {{/if}}
                {{#if (not-eq pkiIssuer.isRoot undefined)}}
                  <span class="tag has-text-grey-dark" data-test-is-root-tag={{idx}}>{{if
                      pkiIssuer.isRoot
                      "root"
                      "intermediate"
                    }}</span>
                {{/if}}
                {{#if pkiIssuer.serialNumber}}
                  <span class="tag is-transparent has-right-margin-none" data-test-serial-number={{idx}}>
                    <InfoTooltip>
                      Serial number
                    </InfoTooltip>
                    {{pkiIssuer.serialNumber}}
                  </span>
                {{/if}}
                {{#if pkiIssuer.parsedCertificate.common_name}}
                  <span class="tag is-transparent has-left-margin-none" data-test-common-name={{idx}}>
                    <InfoTooltip>
                      Common name
                    </InfoTooltip>
                    {{pkiIssuer.parsedCertificate.common_name}}
                  </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 data-test-popup-menu-details>
                      <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}}
  </:list>
  <:empty>
    <EmptyState @title="PKI not configured" @message={{this.notConfiguredMessage}}>
      <LinkTo @route="configuration.create">
        Configure PKI
      </LinkTo>
    </EmptyState>
  </:empty>
</PkiPaginatedList>