{% load substance_tags %}
{% partialdef reactions-filter %}
{% include "lara_django_substances/partials/reactions_filter.html" %}
{% endpartialdef reactions-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="ml-auto flex gap-2">
            <button id="bulk-delete-btn-reaction"
                    class="btn bg-red-500 text-white"
                    style="display: none"
                    hx-post="{% url 'lara_django_substances:reaction-bulk-delete' %}"
                    hx-target="#reactions-table"
                    hx-swap="outerHTML"
                    hx-include=".reaction-checkbox:checked"
                    hx-confirm="__dynamic__"
                    hx-on:htmx:confirm="event.preventDefault(); var n = getSelectedIds('reaction').length; if (confirm('Are you sure you want to delete ' + n + ' selected reaction' + (n !== 1 ? 's' : '') + '?')) event.detail.issueRequest(true);">Delete Selected</button>
            <button id="bulk-duplicate-btn-reaction"
                    class="btn bg-blue-500 text-white"
                    style="display: none"
                    hx-post="{% url 'lara_django_substances:reaction-bulk-duplicate' %}"
                    hx-target="#reactions-table"
                    hx-swap="outerHTML"
                    hx-include=".reaction-checkbox:checked">Duplicate Selected</button>
            <button class="btn bg-green-500 text-white"
                    hx-get="{% url 'lara_django_substances:reaction-create' %}"
                    hx-target="#reactions-body"
                    hx-swap="innerHTML">Add Reaction</button>
        </div>
    </div>
    <!-- Table and filter sections -->
    <div id="reactions-list-container" class="flex flex-col-reverse md:grid md:grid-cols-4 md:gap-6">
        <section id="reactions-list" class="col-span-4 lg:col-span-3 overflow-x-auto">
            {% include "lara_django_substances/partials/reactions_table.html" %}
        </section>
        <section id="filters" class="hidden lg:grid col-span-1 mb-4">
            {% partial reactions-filter %}
        </section>
    </div>
</div>