{{#each @model as |client|}}
  <LinkedBlock
    class="list-item-row"
    @params={{array "vault.cluster.access.oidc.clients.client.details" client.name}}
    data-test-oidc-client-linked-block={{client.name}}
  >
    <div class="level is-mobile">
      <div class="level-left">
        <div>
          <Icon @name="code" class="has-text-grey-light" />
          <span class="has-text-weight-semibold is-underline">
            {{client.name}}
          </span>
          <div class="has-text-grey is-size-8">
            Client ID:
            {{client.clientId}}
          </div>
        </div>
      </div>
      <div class="level-right is-flex is-paddingless is-marginless">
        <div class="level-item">
          <PopupMenu>
            <nav class="menu">
              <ul class="menu-list">
                <li>
                  <LinkTo
                    @route="vault.cluster.access.oidc.clients.client.details"
                    @model={{client.name}}
                    @disabled={{eq client.canRead false}}
                    data-test-oidc-client-menu-link="details"
                  >
                    Details
                  </LinkTo>
                </li>
                <li>
                  <LinkTo
                    @route="vault.cluster.access.oidc.clients.client.edit"
                    @model={{client.name}}
                    @disabled={{eq client.canEdit false}}
                    data-test-oidc-client-menu-link="edit"
                  >
                    Edit
                  </LinkTo>
                </li>
              </ul>
            </nav>
          </PopupMenu>
        </div>
      </div>
    </div>
  </LinkedBlock>
{{/each}}