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