<LinkedBlock
  @params={{array (concat "vault.cluster.secrets.backend." "credentials" (unless @item.id "-root")) @item.id}}
  class="list-item-row"
  data-test-secret-link={{@item.id}}
  @encode={{true}}
>
  <div class="columns is-mobile">
    <div class="column is-10">
      <LinkTo
        @route={{concat "vault.cluster.secrets.backend." "credentials" (unless @item.id "-root")}}
        @model={{@item.id}}
        class="has-text-black has-text-weight-semibold"
      >
        <Icon @name="user" class="has-text-grey-light is-pulled-left" />
        <div class="role-item-details">
          <span class="is-underline">{{if (eq @item.id " ") "(self)" (or @item.keyWithoutParent @item.id)}}</span>
        </div>
      </LinkTo>
    </div>
    <div class="column has-text-right">
      <PopupMenu @name="role-aws-nav" @contentClass="is-wide">
        <Confirm as |c|>
          <nav class="menu">
            <ul class="menu-list">
              {{#if @item.generatePath.isPending}}
                <li class="action">
                  <button disabled type="button" class="link button is-loading is-transparent">
                    loading
                  </button>
                </li>
              {{else if @item.canGenerate}}
                <li class="action">
                  <LinkTo
                    @route="vault.cluster.secrets.backend.credentials"
                    @model={{@item.id}}
                    data-test-role-aws-link="generate"
                  >
                    Generate credentials
                  </LinkTo>
                </li>
              {{/if}}
              {{#if @item.updatePath.isPending}}
                <li class="action">
                  <button disabled type="button" class="link button is-loading is-transparent">
                    loading
                  </button>
                </li>
                <li class="action">
                  <button disabled type="button" class="link button is-loading is-transparent">
                    loading
                  </button>
                </li>
              {{else}}
                {{#if @item.canRead}}
                  <li class="action">
                    <LinkTo @route="vault.cluster.secrets.backend.show" @model={{@item.id}} data-test-role-ssh-link="show">
                      Details
                    </LinkTo>
                  </li>
                {{/if}}
                {{#if @item.canEdit}}
                  <li class="action">
                    <LinkTo @route="vault.cluster.secrets.backend.edit" @model={{@item.id}} data-test-role-ssh-link="edit">
                      Edit
                    </LinkTo>
                  </li>
                {{/if}}
                {{#if @item.canDelete}}
                  <li class="action">
                    <c.Message @id={{@item.id}} @onConfirm={{@delete}} data-test-aws-role-delete={{@item.id}} />
                  </li>
                {{/if}}
              {{/if}}
            </ul>
          </nav>
        </Confirm>
      </PopupMenu>
    </div>
  </div>
</LinkedBlock>