<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">

  <%= icon_tag "check", class: "toggler__visible-when-on margin-inline-end" %>

  <label class="switch toggler__visible-when-off flex-item-no-shrink">
    <% checkbox_data = { toggle_class_target: "checkbox" } %>
    <% checkbox_data[:collections_form_target] = "meCheckbox" if user == Current.user %>
    <%= check_box_tag "user_ids[]", user.id, selected, class: "switch__input", id: nil, data: checkbox_data %>
    <span class="switch__btn round"></span>
    <span class="for-screen-reader">Give <%= user.name %> access</span>
  </label>
</li>
