<PageHeader as |p|>
  <p.levelLeft>
    <h1 class="title is-3">
      Secrets Engines
    </h1>
  </p.levelLeft>
</PageHeader>

<Toolbar>
  <ToolbarFilters>
    <SearchSelect
      @id="filter-by-engine-type"
      @options={{this.secretEngineArrayByType}}
      @selectLimit="1"
      @disallowNewItems={{true}}
      @fallbackComponent="input-search"
      @onChange={{this.filterEngineType}}
      @placeholder={{"Filter by engine type"}}
      @displayInherit={{true}}
      @inputValue={{if this.selectedEngineType (array this.selectedEngineType)}}
      @disabled={{if this.selectedEngineName true false}}
      class="is-marginless"
    />
    <SearchSelect
      @id="filter-by-engine-name"
      @options={{this.secretEngineArrayByName}}
      @selectLimit="1"
      @disallowNewItems={{true}}
      @fallbackComponent="input-search"
      @onChange={{this.filterEngineName}}
      @placeholder={{"Filter by engine name"}}
      @displayInherit={{true}}
      @inputValue={{if this.selectedEngineName (array this.selectedEngineName)}}
      class="is-marginless has-left-padding-s"
    />
  </ToolbarFilters>
  <ToolbarActions>
    <ToolbarLink @route="vault.cluster.settings.mount-secret-backend" @type="add" data-test-enable-engine>
      Enable new engine
    </ToolbarLink>
  </ToolbarActions>
</Toolbar>
{{#each this.sortedDisplayableBackends as |backend|}}
  <LinkedBlock
    @params={{array backend.backendLink backend.id}}
    class="list-item-row linkable-item is-no-underline"
    data-test-auth-backend-link={{backend.id}}
    @disabled={{if backend.isSupportedBackend false true}}
  >
    <div class="linkable-item-content" data-test-linkable-item-content>
      <div class="has-text-grey">
        {{#if backend.icon}}
          <ToolTip @horizontalPosition="left" as |T|>
            <T.Trigger>
              <Icon @name={{backend.icon}} class="has-text-grey-light" data-test-linkable-item-glyph />
            </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 data-test-secret-path>{{backend.path}}</span>
          {{/if}}
        {{/if}}
      </div>
      {{#if backend.accessor}}
        <code class="has-text-grey is-size-8" data-test-linkable-item-accessor>
          {{backend.accessor}}
        </code>
      {{/if}}
      {{#if backend.description}}
        <ReadMore data-test-linkable-item-description>
          {{backend.description}}
        </ReadMore>
      {{/if}}
      {{yield}}
    </div>
    {{! meatball sandwich menu }}
    <div class="linkable-item-menu" data-test-linkable-item-menu={{backend.path}}>
      <PopupMenu @name="engine-menu">
        <Confirm as |c|>
          <nav class="menu" aria-label="{{if backend.isSupportedBackend 'supported' 'unsupported'}} secrets engine menu">
            <ul class="menu-list">
              <li class="action">
                <LinkTo @route="vault.cluster.secrets.backend.configuration" @model={{backend.id}} data-test-engine-config>
                  View configuration
                </LinkTo>
              </li>
              {{#if (not-eq backend.type "cubbyhole")}}
                <li class="action">
                  <c.Message
                    @id={{backend.id}}
                    @triggerText="Disable"
                    @message="Any data in this engine will be permanently deleted."
                    @title="Disable engine?"
                    @confirmButtonText="Disable"
                    @onConfirm={{perform this.disableEngine backend}}
                    data-test-engine-disable="true"
                  />
                </li>
              {{/if}}
            </ul>
          </nav>
        </Confirm>
      </PopupMenu>
    </div>
  </LinkedBlock>
{{/each}}