<li class="flex align-center gap-half" data-filter-target="item" data-navigable-list-target="item">
  <%= link_to user, class: "txt-ink flex gap-half align-center min-width" do %>
    <%= avatar_preview_tag user, hidden_for_screen_reader: true %>
    <div class="txt-align-start overflow-ellipsis">
      <strong><%= user.name %></strong>
      <div class="txt-x-small"><%= user.email_address %></div>
    </div>
  <% end %>

  <hr class="separator--horizontal flex-item-grow" style="--border-color: var(--color-ink-medium); --border-style: dashed" aria-hidden="true">

  <%= form_with model: user, url: user_role_path(user), data: { controller: "form" }, method: :patch do | form | %>
    <label class="btn btn--circle" for="<%= dom_id(user, :role) %>" arial-label="Role: <%= user.admin? ? "Administrator" : "Member" %>">
      <%= icon_tag "crown" %>
      <span class="for-screen-reader">Role: <%= user.admin? ? "Administrator" : "Member" %></span>
      <%= form.check_box :role, { data: { action: "form#submit" }, disabled: !Current.user.can_administer?(user), hidden: true, id: dom_id(user, :role) }, "admin", "member" %>
    </label>
  <% end %>

  <%# FIXME: Move this Current.user check to a stimulus controller that just checks for admin? or the like we so we can cache user list %>
  <%= button_to user, method: :delete, class: "btn btn--circle btn--negative",
        disabled: !Current.user.can_administer?(user),
        data: { turbo_confirm: "Are you sure you want to permanently remove this person from the account?" } do %>
    <%= icon_tag "minus" %>
    <span class="for-screen-reader">Remove <%= user.name %> from the account</span>
  <% end %>
</li>
