{% partialdef polymers-filter %}
{% include "lara_django_substances/partials/polymers_filter.html" %}
{% endpartialdef polymers-filter %}
<!-- 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-include=".polymer-checkbox:checked"
                    hx-confirm="__dynamic__"
                    hx-on:htmx:confirm="event.preventDefault(); var n = getSelectedIds('polymer').length; if (confirm('Are you sure you want to delete ' + n + ' selected polymer' + (n !== 1 ? 's' : '') + '?')) event.detail.issueRequest(true);">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-include=".polymer-checkbox:checked">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="flex flex-col-reverse md:grid md:grid-cols-4 md:gap-6">
        <section id="polymers-list" class="col-span-4 lg:col-span-3 overflow-x-auto">
            {% include "lara_django_substances/partials/polymers_table.html" %}
        </section>
        <section id="filters" class="hidden lg:grid col-span-1 mb-4">
            {% partial polymers-filter %}
        </section>
    </div>
</div>