<%
  # a hash mapping Category => [array, of, conditions], sorted by category
  categorized_conditions = @conditions
    .group_by {|c| c.meta[:category].presence}
    .sort_by do |(category, _conditions)|
      if @refine_filter.has_category_ordering?
        @refine_filter.category_order.index(category) || Float::INFINITY
      else
        category.to_s.downcase
      end
    end
    .to_h

  recommended_conditions = @conditions
    .select { |c| c.meta[:recommended] }
    .sort_by {|recommended| recommended.to_s.downcase }

  # an array of uncategorized conditions
  uncategorized_conditions = categorized_conditions.delete(nil)
  dialog_class = "sl-dialog refine--inline-modal-container"
%>

<%= turbo_frame_tag @criterion do %>
  <sl-dialog open class="<%= dialog_class %>" no-header data-controller="refine--typeahead-list refine--inline-advanced-modal" >
    
    <div class="dialog__header-actions refine--modal-header">
      <h2 part="title" class="dialog__title refine--header-title" id="title">
        <slot name="label"><%= t(".title") %></slot>
      </h2>
      <div part="header-actions" class="refine--modal-header-actions ">
        <slot name="header-actions"></slot>
        <div class="refine--filter-condition-search" data-refine--inline-advanced-modal-target="searchBarInput">
          <div class="absolute inset-y-0 left-0 pl-3 pr-2 flex items-center pointer-events-none" aria-hidden="true">
            <i class="text-coolGray-600 dark:text-coolGray-200 fa-regular fa-magnifying-glass" ></i>
          </div>
          <input type="text" class="input input--search" placeholder="<%= t(".search_attributes") %>" data-search-target="filterProperties" data-action="refine--typeahead-list#filter" />
        </div>
        <sl-icon-button part="close-button" exportparts="base:close-button__base refine--modal-close" class="dialog__close" name="x-lg" library="system" label="Close" data-action="click->refine--modal#close"></sl-icon-button>
      </div>
    </div>
    <sl-tab-group>
      
      <sl-tab slot="nav" panel="filter_attributes" data-action="click->refine--inline-advanced-modal#showSearchBar">
        <i class="fa fa-filter"></i>
        <span class="pl-2"><%= t(".filter_attributes_tab_name") %></span>
      </sl-tab>

      <sl-tab slot="nav" panel="saved_filters" data-action="click->refine--inline-advanced-modal#hideSearchBar">
        <i class="fa fa-floppy-disks"></i>
        <span class="pl-2"><%= t(".filter_saved_filters_tab_name") %></span>
      </sl-tab>
      
      <sl-tab-panel name="filter_attributes" class="refine--advanced-condition-select">
        <% if uncategorized_conditions&.any? %>
          <div class="refine--advanced-condition-select-group">
            <% uncategorized_conditions.each do |condition| %>
              <%= render partial: "condition_list_item_card", locals: {condition: condition } %> 
            <% end %>
          </div>
        <% end %>

        <% if recommended_conditions.any? %>
          <b data-refine--typeahead-list-target="recommended" class="refine--advanced-condition-category-header"><%= t('.recommended') %></b>
          <div class="refine--advanced-condition-select-group">
            <% recommended_conditions.each do |condition| %>
              <%= render partial: "condition_list_item_card", locals: {condition: condition } %> 
            <% end %>
          </div>
        <% end %>

        <% categorized_conditions.each do |(category, conditions)| %>
          <b data-refine--typeahead-list-target="category" class="refine--advanced-condition-category-header"><%= category %></b>
          <div class="refine--advanced-condition-select-group">
            <% conditions.each do |condition| %>
              <%= render partial: "condition_list_item_card", locals: {condition: condition, category: category } %> 
            <% end %>
          </div>
        <% end %>
      </sl-tab-panel>

      <sl-tab-panel name="saved_filters" class="refine--advanced-condition-select">
        <%= turbo_frame_tag dom_id(@criterion, :load), src: refine_advanced_inline_stored_filters_path(@criterion.to_params), loading: :lazy do %>
          <div class="flex items-center justify-center p-9">
            <%= sl_component(:spinner, class: "sl-spinner--medium") %>
          </div> 
        <% end %>
      </sl-tab-panel>
    </sl-tab-group>
  </sl-dialog>
<% end %>