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

<Hds::PageHeader class="page-header" as |PH|>
  <PH.Breadcrumb>
    <Hds::Breadcrumb data-test-breadcrumbs>
      <Hds::Breadcrumb::Item @text="Vault" @route="vault.cluster.dashboard" @icon="vault" />
      <Hds::Breadcrumb::Item @text="Secrets engines" @current={{true}} />
    </Hds::Breadcrumb>
  </PH.Breadcrumb>
  <PH.IconTile @icon="key" />

  <PH.Title>Secrets engines</PH.Title>
  <PH.Subtitle>Secrets engines available in {{this.clusterName}} Vault cluster.</PH.Subtitle>

  <PH.Actions>
    <Hds::Button @text="Enable new engine" @icon="plus" @route="vault.cluster.secrets.mounts" data-test-enable-engine />
  </PH.Actions>
</Hds::PageHeader>

{{! Filters section }}
<Hds::SegmentedGroup class="has-top-margin-m" as |SG|>
  <SG.TextInput
    @width="300px"
    @type="search"
    placeholder="Search by path"
    aria-label="Search"
    data-test-input-search="secret-engine-path"
    {{on "input" (fn this.setSearchText "path")}}
  />
  <SG.Dropdown @width="175px" as |D|>
    <D.Header @hasDivider={{true}}>
      <SG.TextInput @type="search" placeholder="Search" aria-label="Search" {{on "input" (fn this.setSearchText "type")}} />
    </D.Header>
    <D.ToggleButton @color="secondary" @text="Engine type" data-test-toggle-input="filter-by-engine-type" />
    {{#each this.secretEngineArrayByType as |type|}}
      <D.Checkbox
        value={{type.name}}
        checked={{includes type.name this.engineTypeFilters}}
        {{on "click" (fn this.filterByEngineType type.name)}}
        data-test-checkbox={{type.name}}
      ><Hds::Icon @name={{type.icon}} @isInline={{true}} /> {{type.name}}</D.Checkbox>
    {{/each}}
  </SG.Dropdown>
  <SG.Dropdown @width="250px" as |D|>
    <D.ToggleButton @color="secondary" @text="Version" data-test-toggle-input="filter-by-engine-version" />
    {{#if this.engineTypeFilters.length}}
      <D.Header @hasDivider={{true}}>
        <SG.TextInput
          @type="search"
          placeholder="Search"
          aria-label="Search"
          {{on "input" (fn this.setSearchText "version")}}
        />
      </D.Header>
      {{#each this.secretEngineArrayByVersions as |backend|}}
        <D.Checkbox
          value={{backend.version}}
          checked={{includes backend.version this.engineVersionFilters}}
          {{on "click" (fn this.filterByEngineVersion backend.version)}}
          data-test-checkbox={{backend.version}}
        >
          {{backend.version}}
        </D.Checkbox>
      {{/each}}
    {{else}}
      <D.Description class="has-top-padding-s" @text="Select an engine type first to filter by versions." />
    {{/if}}
  </SG.Dropdown>
</Hds::SegmentedGroup>

<Hds::Layout::Flex @gap="8" class="has-top-margin-xs has-bottom-margin-xs" @align="center">
  {{#if (and (not this.engineTypeFilters) (not this.engineVersionFilters))}}
    <Hds::Text::Body class="has-top-padding-xs">No filters applied.</Hds::Text::Body>
  {{else}}
    <Hds::Text::Body>Filters applied:</Hds::Text::Body>
    {{#each this.engineTypeFilters as |type|}}
      <Hds::Tag @text={{type}} @onDismiss={{fn this.filterByEngineType type}} data-test-button={{type}} />
    {{/each}}
    {{#each this.engineVersionFilters as |version|}}
      <Hds::Tag @text={{version}} @onDismiss={{fn this.filterByEngineVersion version}} data-test-button={{version}} />
    {{/each}}
    <Hds::Button
      @text="Clear all"
      @color="tertiary"
      @icon="x"
      @size="small"
      data-test-button="Clear all"
      {{on "click" this.clearAllFilters}}
    />
  {{/if}}
</Hds::Layout::Flex>
{{! End Filters Section }}

{{! Table Section }}
{{#if this.sortedDisplayableBackends}}
  <ListTable class="has-top-margin-xs" @columns={{this.tableColumns}} @data={{this.sortedDisplayableBackends}}>
    <:customTableItem as |itemData|>
      {{#let (this.getEngineResourceData itemData.path) as |backendData|}}
        {{! Only render if we have backendData, so this doesn't try to render while data for the list refreshes }}
        {{#if backendData}}
          <Hds::TooltipButton
            aria-label="Type of backend"
            @text={{this.generateToolTipText backendData}}
            data-test-tooltip="Backend type"
            isInline={{true}}
            class="is-v-centered"
          >
            <Hds::Icon @name={{if backendData.icon backendData.icon "lock"}} />
          </Hds::TooltipButton>
          {{#if backendData.isSupportedBackend}}
            <Hds::Link::Inline
              @route={{backendData.backendLink}}
              @model={{backendData.id}}
              @color="secondary"
              class="has-text-weight-semibold"
              data-test-link-to={{itemData.path}}
            >{{backendData.path}}</Hds::Link::Inline>
          {{else}}
            {{backendData.path}}
          {{/if}}
        {{/if}}
      {{/let}}
    </:customTableItem>

    <:popupMenu as |rowData|>
      {{#let (this.getEngineResourceData rowData.path) as |backendData|}}
        {{! Only render if we have backendData, so this doesn't try to render while data for the list refreshes }}
        {{#if backendData}}
          <Hds::Dropdown @isInline={{true}} as |dd|>
            <dd.ToggleIcon
              @icon="more-horizontal"
              @text="{{if backendData.isSupportedBackend 'supported' 'unsupported'}} secrets engine menu"
              @hasChevron={{false}}
              data-test-popup-menu-trigger
            />
            <dd.Interactive
              @route={{backendData.backendConfigurationLink}}
              @model={{backendData.id}}
              data-test-popup-menu="view-configuration"
              @icon="settings"
            >View configuration</dd.Interactive>
            {{#if (not-eq backendData.type "cubbyhole")}}
              <dd.Interactive
                @color="critical"
                {{on "click" (fn (mut this.engineToDisable) backendData)}}
                data-test-popup-menu="disable-engine"
                @icon="trash"
              >Disable</dd.Interactive>
            {{/if}}
          </Hds::Dropdown>
        {{/if}}
      {{/let}}
    </:popupMenu>
  </ListTable>
{{else}}
  <EmptyState @title="No Secrets engines found" />
{{/if}}
{{! End Table Section }}

{{#if this.engineToDisable}}
  <ConfirmModal
    @color="critical"
    @confirmMessage="Any data in this engine will be permanently deleted."
    @confirmTitle="Disable engine?"
    @onClose={{fn (mut this.engineToDisable) null}}
    @onConfirm={{perform this.disableEngine this.engineToDisable}}
  />
{{/if}}