{% partialdef polymers-filter %}
  {% include "lara_django_substances/partials/polymers_filter.html" %}
{% endpartialdef polymers-filter %}
{% partialdef polymers-row %}
  {% include "lara_django_substances/partials/polymer_row.html" %}
{% endpartialdef polymers-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-polymer"
              style="display: none;"
              hx-post="{% url 'lara_django_substances:polymer-bulk-delete' %}"
              hx-target="#polymers-table"
              hx-swap="outerHTML"
              hx-confirm="Are you sure you want to delete the selected polymers?"
              hx-vals="js:{polymer_ids: getSelectedIds('polymer')}">
        Delete Selected
      </button>
      <button class="btn bg-blue-500 text-white" 
              id="bulk-duplicate-btn-polymer"
              style="display: none;"
              hx-post="{% url 'lara_django_substances:polymer-bulk-duplicate' %}"
              hx-target="#polymers-table"
              hx-swap="outerHTML"
              hx-vals="js:{polymer_ids: getSelectedIds('polymer')}">
        Duplicate Selected
      </button>
      <button class="btn bg-green-500 text-white" 
              hx-get="{% url 'lara_django_substances:polymer-create' %}"
              hx-target="#polymers-body"
              hx-swap="innerHTML">
        Add Polymer
      </button>
    </div>
  </div>

  <!-- Table and filter sections -->
  <div id="polymers-list-container" class="grid grid-cols-4 gap-6">
        <section id="polymers-list" class="col-span-4 lg:col-span-3 overflow-x-auto">
            <table id="polymers-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:polymers-overview' %}?sort=name&order={% if current_sort == 'name' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#polymers-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:polymers-overview' %}?sort=acronym&order={% if current_sort == 'acronym' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#polymers-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:polymers-overview' %}?sort=polymer_type&order={% if current_sort == 'polymer_type' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#polymers-table"
                            hx-swap="outerHTML"
                            hx-include="#filter-form">
                            <div class="flex items-center gap-1">
                                <span>Type</span>
                                {% if current_sort == 'polymer_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:polymers-overview' %}?sort=mass_molar&order={% if current_sort == 'mass_molar' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#polymers-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:polymers-overview' %}?sort=density&order={% if current_sort == 'density' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#polymers-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:polymers-overview' %}?sort=melting_point&order={% if current_sort == 'melting_point' and current_order == 'asc' %}desc{% else %}asc{% endif %}"
                            hx-target="#polymers-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 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 text-center">
                            <input type="checkbox" 
                                   class="checkbox checkbox-sm" 
                                   id="select-all-checkbox-polymer"
                                   onchange="toggleAllCheckboxes(this, 'polymer')">
                        </th>
                    </tr>
                </thead>

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