<li class="flex align-center gap-half pad-inline" data-filter-target="item" data-value="<%= user.name.downcase %>">
  <%= avatar_tag user, class: "flex-item-no-shrink" %>

  <strong class="overflow-ellipsis">
    <%= link_to user.name, user, class: "txt-ink btn btn--plain" %>
  </strong>

  <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 txt-small flex-item-no-shrink" 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 txt-small btn--negative flex-item-no-shrink",
        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>
