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

<LinkedBlock
  class="list-item-row"
  @params={{array "vault.cluster.access.mfa.methods.method" @model.id}}
  data-test-mfa-method-list-item={{@model.id}}
>
  <div class="level is-mobile">
    <div class="level-left">
      <div class="is-flex-row">
        <Icon @size="24" @name={{@model.icon}} class="has-text-grey" data-test-mfa-method-list-icon={{@model.type}} />
        <div>
          <span class="has-text-weight-semibold has-text-black">
            {{@model.name}}
          </span>
          <span class="tag has-left-margin-xs">
            {{@model.id}}
          </span>
          <div class="has-top-margin-xs">
            <code class="is-size-9">
              Namespace:
              {{@model.namespace_id}}
            </code>
          </div>
        </div>
      </div>
    </div>
    <div class="level-right is-flex is-paddingless is-marginless">
      <div class="level-item">
        <Hds::Dropdown @isInline={{true}} @listPosition="bottom-right" as |dd|>
          <dd.ToggleIcon
            @icon="more-horizontal"
            @text="Manage M-F-A method"
            @hasChevron={{false}}
            data-test-popup-menu-trigger
          />
          <dd.Interactive
            @text="Details"
            @route="vault.cluster.access.mfa.methods.method"
            @model={{@model.id}}
            data-test-mfa-method-menu-link="details"
          />
          <dd.Interactive
            @text="Edit"
            @route="vault.cluster.access.mfa.methods.method.edit"
            @model={{@model.id}}
            data-test-mfa-method-menu-link="edit"
          />
        </Hds::Dropdown>
      </div>
    </div>
  </div>
</LinkedBlock>