<li class="flex align-center gap-half margin-none unpad txt-normal" data-filter-target="item" data-value="<%= user.name.downcase %>">
  <figure class="avatar flex-item-no-shrink">
    <%= avatar_tag user %>
  </figure>

  <div class="min-width">
    <div class="overflow-ellipsis">
      <strong><%= user.name %></strong>
    </div>
  </div>

  <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">
    <%= check_box_tag "user_ids[]", user.id, selected, class: "switch__input", id: nil %>
    <span class="switch__btn round"></span>
    <span class="for-screen-reader">Give <%= user.name %> access</span>
  </label>
</li>
