{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<Hds::Card::Container
  @hasBorder={{true}}
  class="has-padding-l {{if this.filteredSecretsEngines 'secrets-engines-card'}}"
  data-test-card="secrets-engines"
>
  <div class="is-flex-between">
    <h3 class="title is-4 has-left-margin-xxs" data-test-dashboard-secrets-engines-header>Secrets engines</h3>

    {{#if this.filteredSecretsEngines}}
      <LinkTo class="is-no-underline has-right-margin-xxs" @route="vault.cluster.secrets.backends">
        Details
      </LinkTo>
    {{/if}}
  </div>

  {{#if this.filteredSecretsEngines}}
    <Hds::Table @caption="Five secrets engines" class="is-border-spacing-revert" data-test-dashboard-secrets-engines-table>
      <:body as |B|>
        {{#each this.firstFiveSecretsEngines as |backend|}}
          <B.Tr data-test-secrets-engines-row={{backend.id}}>
            <B.Td class="is-flex-between is-flex-center has-gap-m">
              <div>
                <div class="is-flex-center">
                  {{#if backend.icon}}
                    <ToolTip @horizontalPosition="left" as |T|>
                      <T.Trigger>
                        <Icon @name={{backend.icon}} class={{unless backend.isSupportedBackend "has-text-grey"}} />
                      </T.Trigger>
                      <T.Content @defaultClass="tool-tip">
                        <div class="box">
                          {{or backend.engineType backend.path}}
                        </div>
                      </T.Content>
                    </ToolTip>
                  {{/if}}
                  {{#if backend.path}}
                    {{#if backend.isSupportedBackend}}
                      <LinkTo
                        @route={{backend.backendLink}}
                        @model={{backend.id}}
                        class="has-text-black has-text-weight-semibold"
                        data-test-secret-path
                      >
                        {{backend.path}}
                      </LinkTo>
                    {{else}}
                      <span class="has-text-grey" data-test-secret-path>{{backend.path}}</span>
                    {{/if}}
                  {{/if}}
                </div>
                {{#if backend.accessor}}
                  <code class="has-text-grey is-size-8" data-test-accessor>
                    {{backend.accessor}}
                  </code>
                {{/if}}
                {{#if backend.description}}
                  <div data-test-description class="truncate-first-line">
                    {{backend.description}}
                  </div>
                {{/if}}
              </div>
              {{#if backend.isSupportedBackend}}
                <LinkTo
                  @route={{backend.backendLink}}
                  @model={{backend.id}}
                  class="has-text-weight-semibold is-no-underline"
                  data-test-view
                >
                  View
                </LinkTo>
              {{/if}}
            </B.Td>
          </B.Tr>
        {{/each}}
      </:body>
    </Hds::Table>

    {{#if (gt this.filteredSecretsEngines.length 5)}}
      <p class="is-size-9 has-top-margin-xs has-text-grey" data-test-secrets-engine-total-help-text>
        Showing 5 out of
        {{this.filteredSecretsEngines.length}}
        secret engines. Navigate to
        <Hds::Link::Inline @route="vault.cluster.secrets.backends">details</Hds::Link::Inline>
        to view more.
      </p>
    {{/if}}

  {{else}}
    <EmptyState
      @title="No secrets engines enabled"
      @message="Secret engines will be listed here. Enable a secret engine to get started."
      class="has-top-margin-m"
      data-test-empty-state="secrets-engines"
    >
      <div>
        <LinkTo @route="vault.cluster.settings.mount-secret-backend">Enable a secret engine</LinkTo>
      </div>
    </EmptyState>
  {{/if}}
</Hds::Card::Container>