<section class="settings__section">
  <header>
    <h2 class="divider">People on this account</h2>
  </header>

  <%= tag.div class: "settings__user-filter flex flex-column gap", data: {
    controller: "filter navigable-list",
    action: "keydown->navigable-list#navigate filter:changed->navigable-list#reset",
    navigable_list_focus_on_selection_value: true,
    navigable_list_actionable_items_value: true
  } do %>

    <div class="settings__user-filter">
      <input placeholder="Filter…" class="input input--transparent full-width txt-small" type="search" autocorrect="off" autocomplete="off" data-1p-ignore="true" data-filter-target="input" data-action="input->filter#filter">

      <ul class="settings__scrollable-list margin-block-half" data-filter-target="list" role="listbox">
        <%= render partial: "account/settings/user", collection: users %>
      </ul>
    </div>

    <%= link_to account_join_code_path, class: "btn btn--link center" do %>
      <%= icon_tag "add" %>
      <span>Invite people</span>
    <% end %>
  <% end %>
</section>
