<% filter = user_filtering.filter %>
<%= tag.div class: "quick-filter",
      data: {
        controller: "dialog filter multi-selection-combobox",
        action: "keydown.esc->dialog#close click@document->dialog#closeOnClickOutside dialog:close@document->filter#clearInput",
        filter_show: user_filtering.show_assignees?,
        multi_selection_combobox_no_selection_label_value: "Assigned to…",
        multi_selection_combobox_label_prefix_value: "Assigned to" } do %>
    <button type="button" class="btn input input--select flex-inline txt-x-small" data-action="click->dialog#toggle:stop">
      <span class="overflow-ellipsis" data-multi-selection-combobox-target="label">
      </span>
    </button>

    <template data-multi-selection-combobox-target="hiddenFieldTemplate">
      <%= hidden_field_tag "assignee_ids[]", nil, data: { filter_settings_target: "field" } %>
    </template>

    <%= filter_dialog "Assigned to…" do %>
      <%= filter_title "Assigned to…" %>
      <% if Current.account.users.active.many? %>
        <%= text_field_tag nil, nil, id: nil, placeholder: "Filter…", class: "input input--transparent txt-small", autofocus: true,
              type: "search", autocorrect: "off", autocomplete: "off", data: { "1p-ignore": "true", filter_target: "input", dialog_target: "focusMouse", action: "input->filter#filter" } %>
      <% end %>

      <ul class="popup__list" data-filter-target="list" role="listbox">
        <%= tag.li class: "popup__item", data: {
              filter_target: "item", navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: "unassigned",
              multi_selection_combobox_label: "No one", multi_selection_field_name: "assignment_status", multi_selection_exclusive: true },
              role: "checkbox", aria: { checked: filter.assignment_status.unassigned? } do %>
          <button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change filter-settings#change form#submit">
            <span class="overflow-ellipsis flex-item-grow">No one</span>
            <%= icon_tag "check", class: "checked flex-item-justify-end" %>
          </button>
        <% end %>

        <% user_filtering.users.each do |user| %>
          <%= tag.li class: "popup__item", data: {
                filter_target: "item", navigable_list_target: "item", multi_selection_combobox_target: "item", multi_selection_combobox_value: user.id, multi_selection_combobox_label: user.familiar_name },
                role: "checkbox", aria: { checked: filter.assignees.include?(user) } do %>
            <button type="button" class="btn popup__btn" data-action="dialog#close multi-selection-combobox#change filter-settings#change form#submit">
              <span class="overflow-ellipsis flex-item-grow"><%= user.name %></span>
              <%= icon_tag "check", class: "checked flex-item-justify-end" %>
            </button>
          <% end %>
        <% end %>
      </ul>
    <% end %>
<% end %>
