<%
  # a hash mapping Category => [array, of, conditions], sorted by category
  categorized_conditions = @conditions
    .group_by {|c| c.meta[:category].presence}
    .sort_by {|(category, _conditions)| category.to_s.downcase }
    .to_h

  # an array of uncategorized conditions
  uncategorized_conditions = categorized_conditions.delete(nil)
%>

<%= turbo_frame_tag @criterion do %>
  <div data-controller="refine--typeahead-list">

    <div class="refine--search-box">
      <span class="material-icons refine--icon-search">search</span>
      <input class="refine--search-trigger" data-search-target="filterProperties" placeholder="<%= t('.type_to_search') %>..." type="text" data-action="refine--typeahead-list#filter" autofocus>
    </div>

    <div class="refine--separator-m0"></div>

    <div class="refine--condition-list">
      <% uncategorized_conditions.each do |condition| %>
        <%= link_to condition.display,
          new_refine_inline_criterion_url(@criterion.to_params.deep_merge(refine_inline_criterion: {condition_id: condition.id})),
          class: "refine--condition-list-item",
          data: {
            controller: "refine--turbo-stream-link",
            action: "refine--turbo-stream-link#visit",
            refine__typeahead_list_target: "listItem",
            list_item_value: condition.display
          }
        %>
      <% end %>

      <%  categorized_conditions.each do |(category, conditions)| %>
        <b data-refine--typeahead-list-target="category"><%= category %></b>
        <% conditions.each do |condition| %>
          <%= link_to condition.display,
            new_refine_inline_criterion_url(@criterion.to_params.deep_merge(refine_inline_criterion: {condition_id: condition.id})),
            class: "refine--condition-list-item",
            data: {
              controller: "refine--turbo-stream-link",
              action: "refine--turbo-stream-link#visit",
              refine__typeahead_list_target: "listItem",
              category: category
            }
          %>
        <% end %>
      <% end %>
    </div>

  </div>
  <div class="refine--separator"></div>
  <%= render "refine/inline/filters/popup",
    frame_id: dom_id(@criterion, :load),
    src: refine_inline_stored_filters_path(@criterion.to_params),
    frame_class: "refine--stored-filter-list-popup" do
  %>
    <%= link_to "#", class: "refine--stored-filters-link", data: {action: "click->refine--popup#show"} do %>
      <div class="material-icons-outlined refine--list-icon">save</div>
      <%= t('.saved_filters') %>
    <% end %>
  <% end %>
<% end %>