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

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

<Toolbar>
  <ToolbarFilters>
    <SearchSelect
      @id="filter-by-auth-type"
      @options={{this.authMethodArrayByType}}
      @selectLimit="1"
      @disallowNewItems={{true}}
      @fallbackComponent="input-search"
      @onChange={{this.filterAuthType}}
      @placeholder={{"Filter by auth type"}}
      @displayInherit={{true}}
      @inputValue={{if this.selectedAuthType (array this.selectedAuthType)}}
      @disabled={{if this.selectedAuthName true false}}
      class="is-marginless"
    />
    <SearchSelect
      @id="filter-by-auth-name"
      @options={{this.authMethodArrayByName}}
      @selectLimit="1"
      @disallowNewItems={{true}}
      @fallbackComponent="input-search"
      @onChange={{this.filterAuthName}}
      @placeholder={{"Filter by auth name"}}
      @displayInherit={{true}}
      @inputValue={{if this.selectedAuthName (array this.selectedAuthName)}}
      class="is-marginless has-left-padding-s"
    />
  </ToolbarFilters>
  <ToolbarActions>
    <ToolbarLink @route="vault.cluster.settings.auth.enable" @type="add" data-test-auth-enable>
      Enable new method
    </ToolbarLink>
  </ToolbarActions>
</Toolbar>

{{#each (sort-by "path" this.authMethodList) as |method|}}
  <LinkedBlock
    @params={{array "vault.cluster.access.method" method.id}}
    class="list-item-row"
    data-test-auth-backend-link={{method.id}}
  >
    <div class="level is-mobile">
      <div class="level-left">
        <div>
          <ToolTip @horizontalPosition="left" as |T|>
            <T.Trigger>
              <Icon
                @name={{if
                  (or (find-by "type" method.methodType (mountable-auth-methods)) (eq method.methodType "token"))
                  method.methodType
                  "auth"
                }}
                class="has-text-grey-light"
              />
            </T.Trigger>
            <T.Content @defaultClass="tool-tip">
              <div class="box">
                {{method.methodType}}
              </div>
            </T.Content>
          </ToolTip>
          <span data-test-path data-test-id={{method.id}} class="has-text-weight-semibold has-text-black">
            {{method.path}}
          </span>
          <br />
          <code class="has-text-grey is-size-8">
            {{method.accessor}}
          </code>
        </div>
      </div>
      <div class="level-right is-flex is-paddingless is-marginless">
        <div class="level-item">
          <PopupMenu @name="auth-backend-nav">
            <Confirm as |c|>
              <nav class="menu">
                <ul class="menu-list">
                  <li>
                    <LinkTo @route="vault.cluster.access.method.section" @models={{array method.id "configuration"}}>
                      View configuration
                    </LinkTo>
                  </li>
                  {{#if method.canEdit}}
                    <li>
                      <LinkTo @route="vault.cluster.settings.auth.configure" @model={{method.id}}>
                        Edit configuration
                      </LinkTo>
                    </li>
                  {{/if}}

                  {{#if (and (not-eq method.methodType "token") method.canDisable)}}
                    <li class="action">
                      <c.Message
                        @id={{method.id}}
                        @title="Disable method?"
                        @message="This may affect access to Vault data."
                        @triggerText="Disable"
                        @onConfirm={{perform this.disableMethod method}}
                      />
                    </li>
                  {{/if}}
                </ul>
              </nav>
            </Confirm>
          </PopupMenu>
        </div>
      </div>
    </div>
  </LinkedBlock>
{{/each}}