{% partialdef mixtures-filter %}
  {% include "lara_django_substances/partials/mixtures_filter.html" %}
{% endpartialdef mixtures-filter %}
{% partialdef mixtures-row %}
  {% include "lara_django_substances/partials/mixture_row.html" %}
{% endpartialdef mixtures-row %}

<!-- Component controls its own max-width, parent centers it -->
<div class="w-full max-w-[120rem]">
  <!-- Add button and mobile filter toggle -->
  <div class="mb-4 flex justify-between items-center">
    <button class="btn lg:hidden" id="show-filter-btn">Show filters</button>
    <div class="ml-auto flex gap-2">
      <button id="bulk-delete-btn-mixture" 
              class="btn bg-red-500 text-white" 
              style="display: none;"
              hx-post="{% url 'lara_django_substances:mixture-bulk-delete' %}"
              hx-target="#mixtures-table"
              hx-swap="outerHTML"
              hx-vals="js:{mixture_ids: getSelectedIds('mixture')}"
              hx-confirm="Are you sure you want to delete the selected mixtures?">
        Delete Selected
      </button>
      <button id="bulk-duplicate-btn-mixture" 
              class="btn bg-blue-500 text-white" 
              style="display: none;"
              hx-post="{% url 'lara_django_substances:mixture-bulk-duplicate' %}"
              hx-target="#mixtures-table"
              hx-swap="outerHTML"
              hx-vals="js:{mixture_ids: getSelectedIds('mixture')}">
        Duplicate Selected
      </button>
      <button class="btn bg-green-500 text-white" 
              hx-get="{% url 'lara_django_substances:mixture-create' %}"
              hx-target="#mixtures-body"
              hx-swap="innerHTML">
        Add Mixture
      </button>
    </div>
  </div>

  <!-- Table and filter sections -->
  <div id="mixtures-list-container" class="grid grid-cols-4 gap-6">
        <section id="mixtures-list" class="col-span-4 lg:col-span-3 overflow-x-auto">
            <table id="mixtures-table" class="table table-zebra table-pin-rows w-full">
                <thead class="bg-{{ app_color }}-600 text-white text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg">
                    <tr class="bg-{{ app_color }}-600">
                        <th class="bg-{{ app_color }}-600 hover:bg-{{ app_color }}-700 cursor-pointer text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg"
                            hx-get="{% url 'lara_django_substances:mixtures-overview' %}?sort=name&order={% if current_sort == 'name' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#mixtures-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>Name</span>
                                {% if current_sort == 'name' %}
                                    <span class="text-xs">{% if current_order == 'asc' %}▲{% else %}▼{% endif %}</span>
                                {% endif %}
                            </div>
                        </th>
                        <th class="bg-{{ app_color }}-600 hover:bg-{{ app_color }}-700 cursor-pointer text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg"
                            hx-get="{% url 'lara_django_substances:mixtures-overview' %}?sort=acronym&order={% if current_sort == 'acronym' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#mixtures-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>Acronym</span>
                                {% if current_sort == 'acronym' %}
                                    <span class="text-xs">{% if current_order == 'asc' %}▲{% else %}▼{% endif %}</span>
                                {% endif %}
                            </div>
                        </th>
                        <th class="bg-{{ app_color }}-600 hover:bg-{{ app_color }}-700 cursor-pointer text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg"
                            hx-get="{% url 'lara_django_substances:mixtures-overview' %}?sort=mixture_type&order={% if current_sort == 'mixture_type' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#mixtures-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>Type</span>
                                {% if current_sort == 'mixture_type' %}
                                    <span class="text-xs">{% if current_order == 'asc' %}▲{% else %}▼{% endif %}</span>
                                {% endif %}
                            </div>
                        </th>
                        <th class="bg-{{ app_color }}-600 hover:bg-{{ app_color }}-700 cursor-pointer text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg"
                            hx-get="{% url 'lara_django_substances:mixtures-overview' %}?sort=density&order={% if current_sort == 'density' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#mixtures-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>Density</span>
                                {% if current_sort == 'density' %}
                                    <span class="text-xs">{% if current_order == 'asc' %}▲{% else %}▼{% endif %}</span>
                                {% endif %}
                            </div>
                        </th>
                        <th class="bg-{{ app_color }}-600 hover:bg-{{ app_color }}-700 cursor-pointer text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg"
                            hx-get="{% url 'lara_django_substances:mixtures-overview' %}?sort=ph&order={% if current_sort == 'ph' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#mixtures-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>pH</span>
                                {% if current_sort == 'ph' %}
                                    <span class="text-xs">{% if current_order == 'asc' %}▲{% else %}▼{% endif %}</span>
                                {% endif %}
                            </div>
                        </th>
                        <th class="bg-{{ app_color }}-600 text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg">Description</th>
                        <th class="bg-{{ app_color }}-600 text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg">Actions</th>
                        <th class="bg-{{ app_color }}-600 text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg">
                            <input type="checkbox" 
                                   id="select-all-checkbox-mixture" 
                                   class="checkbox checkbox-sm" 
                                   onchange="toggleAllCheckboxes(this, 'mixture')">
                        </th>
                    </tr>
                </thead>

                <tbody id="mixture-table-body" class="text-xs md:text-xs lg:text-sm xl:text-sm 2xl:text-base">
                    {% if mixtures_list %}
                        {% for mixture in mixtures_list %}
                            {% partial mixtures-row %}
                        {% endfor %}
                        {% if page_obj %}
                        <tr>
                            <td colspan="8">
                                {% include "lara_django_substances/partials/pagination.html" %}
                            </td>
                        </tr>
                        {% endif %}
                    {% else %}
                    <tr class="no-mixture-row">
                        <td colspan="8">
                            <div role="alert" class="alert alert-info">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  fill="none"
                                  viewBox="0 0 24 24"
                                  class="h-6 w-6 shrink-0 stroke-current">
                                  <path
                                    stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                <span>No mixtures found.</span>
                              </div>   
                        </td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </section>
        <section id="filters" class="hidden lg:grid col-span-1 mb-4">
          {% partial mixtures-filter %}
        </section>
  </div>
</div>