{{!
  Copyright IBM Corp. 2016, 2025
  SPDX-License-Identifier: BUSL-1.1
}}

<div class="is-grid grid-2-columns grid-gap-2 has-top-margin-l">
  <OverviewCard
    @cardTitle="Issuers"
    @subText="The total number of issuers in this PKI mount. Includes both root and intermediate certificates."
  >
    <:action>
      <Hds::Link::Standalone
        @text="View issuers"
        @route="issuers"
        @model={{@engine.id}}
        @icon="chevron-right"
        @iconPosition="trailing"
      />
    </:action>
    <:content>
      <Hds::Text::Display @tag="p" @size="400" @weight="medium" class="has-top-margin-m">
        {{format-number (if (eq @issuers 404) 0 @issuers.length)}}
      </Hds::Text::Display>
    </:content>
  </OverviewCard>
  {{#if (not-eq @roles 403)}}
    <OverviewCard
      @cardTitle="Roles"
      @subText="The total number of roles in this PKI mount that have been created to generate certificates."
    >
      <:action>
        <Hds::Link::Standalone
          @text="View roles"
          @route="roles"
          @model={{@engine.id}}
          @icon="chevron-right"
          @iconPosition="trailing"
        />
      </:action>
      <:content>
        <Hds::Text::Display @tag="p" @size="400" @weight="medium" class="has-top-margin-m">
          {{format-number (if (eq @roles 404) 0 @roles.length)}}
        </Hds::Text::Display>
      </:content>
    </OverviewCard>
  {{/if}}
  <OverviewCard @cardTitle="Issue certificate" @subText="Begin issuing a certificate by choosing a role.">
    <:content>
      <div class="has-top-margin-m is-flex">
        <SearchSelect
          class="is-flex-grow-1"
          @ariaLabel="Role"
          @selectLimit="1"
          @models={{array "pki/role"}}
          @backend={{@engine.id}}
          @placeholder="Type to find a role..."
          @disallowNewItems={{true}}
          @onChange={{this.handleRolesInput}}
          @fallbackComponent="input-search"
          data-test-issue-certificate-input
        />
        <Hds::Button
          @text="Issue"
          @color="secondary"
          class="has-left-margin-s align-self-baseline"
          type="submit"
          disabled={{unless this.rolesValue true}}
          {{on "click" this.transitionToIssueCertificates}}
          data-test-issue-certificate-button
        />
      </div>
    </:content>
  </OverviewCard>

  <OverviewCard @cardTitle="View certificate" @subText="Quickly view a certificate by typing its serial number.">
    <:content>
      <div class="has-top-margin-m {{unless this.certificateValue 'is-flex'}}">
        <SearchSelect
          class="is-flex-grow-1"
          @ariaLabel="Certificate serial number"
          @selectLimit="1"
          @models={{array "pki/certificate/base"}}
          @backend={{@engine.id}}
          @placeholder="33:a3:..."
          @disallowNewItems={{true}}
          @onChange={{this.handleCertificateInput}}
          @fallbackComponent="input-search"
          data-test-view-certificate-input
        />
        <Hds::Button
          @text="View"
          @color="secondary"
          class="align-self-baseline {{unless this.certificateValue 'has-left-margin-s'}}"
          disabled={{unless this.certificateValue true}}
          {{on "click" this.transitionToViewCertificates}}
          data-test-view-certificate-button
        />
      </div>
    </:content>
  </OverviewCard>

  <OverviewCard @cardTitle="View issuer" @subText="Choose or type an issuer name or ID to view its details">
    <:content>
      <div class="has-top-margin-m is-flex">
        <SearchSelect
          class="is-flex-grow-1"
          @ariaLabel="Issuer name or ID"
          @selectLimit="1"
          @models={{array "pki/issuer"}}
          @backend={{@engine.id}}
          @placeholder="Type to find an issuer..."
          @disallowNewItems={{true}}
          @onChange={{this.handleIssuerSearch}}
          @fallbackComponent="input-search"
          @shouldRenderName={{true}}
          @nameKey="issuerName"
          data-test-issue-issuer-input
        />
        <Hds::Button
          @text="View"
          @color="secondary"
          class="has-left-margin-s align-self-baseline"
          type="submit"
          disabled={{unless this.issuerValue true}}
          {{on "click" this.transitionToIssuerDetails}}
          data-test-view-issuer-button
        />
      </div>
    </:content>
  </OverviewCard>
</div>