<LinkedBlock
  @params={{array
    (concat "vault.cluster.secrets.backend." (if (eq @item.keyType "ca") "sign" "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."
          (if (eq @item.keyType "ca") "sign" "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>
          <br />
          <span class="tag has-text-grey-dark">{{@item.keyType}}</span>
          {{#if @item.zeroAddress}}
            <span class="has-text-grey is-size-7">Zero-Address</span>
          {{/if}}
        </div>
      </LinkTo>
    </div>
    <div class="column has-text-right">
      {{#if (eq @backendType "ssh")}}
        <PopupMenu @name="role-ssh-nav">
          <Confirm as |c|>
            <nav class="menu">
              <ul class="menu-list">
                {{#if (eq @item.keyType "otp")}}
                  {{#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-ssh-link="generate"
                      >
                        Generate Credentials
                      </LinkTo>
                    </li>
                  {{/if}}
                {{else if (eq @item.keyType "ca")}}
                  {{#if @item.signPath.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.sign"
                        @model={{@item.id}}
                        data-test-role-ssh-link="generate"
                      >
                        Sign Keys
                      </LinkTo>
                    </li>
                  {{/if}}
                {{/if}}
                {{#if @item.canEditZeroAddress}}
                  {{#if @item.zeroAddress}}
                    <li class="action">
                      <button
                        type="button"
                        disabled={{get this (concat "loading-" @item.id)}}
                        class="link button is-transparent {{if (get this (concat 'loading-' @item.id)) 'is-loading'}} "
                        {{on "click" @toggleZeroAddress}}
                      >
                        Disable Zero Address
                      </button>
                    </li>
                  {{else}}
                    <li class="action">
                      <button
                        type="button"
                        disabled={{get this (concat "loading-" @item.id)}}
                        class="link button is-transparent {{if (get this (concat 'loading-' @item.id)) 'is-loading'}}"
                        {{on "click" @toggleZeroAddress}}
                      >
                        Enable Zero Address
                      </button>
                    </li>
                  {{/if}}
                {{/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-ssh-role-delete />
                    </li>
                  {{/if}}
                {{/if}}
              </ul>
            </nav>
          </Confirm>
        </PopupMenu>
      {{/if}}
    </div>
  </div>
</LinkedBlock>