{% partialdef substances-filter %}
  {% include "lara_django_substances/partials/substances_filter.html" %}
{% endpartialdef substances-filter %}
{% partialdef substances-row %}
  {% include "lara_django_substances/partials/substance_row.html" %}
{% endpartialdef substances-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="flex gap-2 ml-auto">
      <button class="btn bg-red-500 text-white" 
              id="bulk-delete-btn-substance"
              style="display: none;"
              hx-post="{% url 'lara_django_substances:substance-bulk-delete' %}"
              hx-target="#substances-table"
              hx-swap="outerHTML"
              hx-confirm="Are you sure you want to delete the selected substances?"
              hx-vals="js:{substance_ids: getSelectedSubstanceIds()}">
        Delete Selected
      </button>
      <button class="btn bg-blue-500 text-white" 
              id="bulk-duplicate-btn-substance"
              style="display: none;"
              hx-post="{% url 'lara_django_substances:substance-bulk-duplicate' %}"
              hx-target="#substances-table"
              hx-swap="outerHTML"
              hx-vals="js:{substance_ids: getSelectedSubstanceIds()}">
        Duplicate Selected
      </button>
      <a class="btn bg-green-500 text-white" onclick="substances_add_modal.showModal()">Add</a>
    </div>
  </div>

  {% include 'lara_django_substances/partials/add_substances_modal.html' %}

  <!-- Table and filter sections -->
  <div id="substances-list-container" class="grid grid-cols-4 gap-6">
        <section id="substances-list" class="col-span-4 lg:col-span-3 overflow-x-auto">
            <table id="substances-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:substances-overview' %}?sort=name&order={% if current_sort == 'name' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#substances-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>Image</span>
                            </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:substances-overview' %}?sort=name&order={% if current_sort == 'name' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#substances-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:substances-overview' %}?sort=cas&order={% if current_sort == 'cas' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#substances-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>CAS</span>
                                {% if current_sort == 'cas' %}
                                    <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:substances-overview' %}?sort=iupac_name&order={% if current_sort == 'iupac_name' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#substances-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>IUPAC Name</span>
                                {% if current_sort == 'iupac_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:substances-overview' %}?sort=pubchem_cid&order={% if current_sort == 'pubchem_cid' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#substances-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>PubChem CID</span>
                                {% if current_sort == 'pubchem_cid' %}
                                    <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:substances-overview' %}?sort=sumformula&order={% if current_sort == 'sumformula' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#substances-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>Formula</span>
                                {% if current_sort == 'sumformula' %}
                                    <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:substances-overview' %}?sort=mass_molar&order={% if current_sort == 'mass_molar' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#substances-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>MW (g/mol)</span>
                                {% if current_sort == 'mass_molar' %}
                                    <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:substances-overview' %}?sort=density&order={% if current_sort == 'density' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#substances-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:substances-overview' %}?sort=xlogp&order={% if current_sort == 'xlogp' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#substances-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>XLogP</span>
                                {% if current_sort == 'xlogp' %}
                                    <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:substances-overview' %}?sort=melting_point&order={% if current_sort == 'melting_point' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#substances-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>MP (°C)</span>
                                {% if current_sort == 'melting_point' %}
                                    <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:substances-overview' %}?sort=boiling_point&order={% if current_sort == 'boiling_point' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#substances-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>BP (°C)</span>
                                {% if current_sort == 'boiling_point' %}
                                    <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">Actions</th>
                        <th class="bg-{{ app_color }}-600 text-xs md:text-sm lg:text-base xl:text-base 2xl:text-lg text-center">
                            <input type="checkbox" 
                                   class="checkbox checkbox-sm" 
                                   id="select-all-checkbox-substance"
                                   onchange="toggleAllCheckboxes(this, 'substance')">
                        </th>
                    </tr>
                </thead>

                <tbody id="substance-table-body" class="text-xs md:text-xs lg:text-sm xl:text-sm 2xl:text-base">
                    {% if substances_list %}
                        {% for substance in substances_list %}
                            {% partial substances-row %}
                        {% endfor %}
                        {% if page_obj %}
                        <tr>
                            <td colspan="13">
                                {% include "lara_django_substances/partials/pagination.html" %}
                            </td>
                        </tr>
                        {% endif %}
                    {% else %}
                    <tr class="no-substance-row">
                        <td colspan="13">
                            <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 substances found.</span>
                              </div>   
                        </td>
                    </tr>
                    {% endif %}
                </tbody>
            </table>
        </section>
        <section id="filters" class="hidden lg:grid col-span-1 mb-4">
          {% partial substances-filter %}
        </section>
  </div>
</div>