{% partialdef sequences-filter %}
{% include "lara_django_sequences/partials/sequences_filter.html" %}
{% endpartialdef sequences-filter %}
<!-- Component controls its own max-width, parent centers it -->
<div class="w-full max-w-[120rem]">
    <input type="hidden"
           id="current-sequence-view"
           name="view"
           value="{{ current_view|default:'table' }}" />
    <!-- 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 items-center flex-wrap justify-end">
            <div class="join">
                <button type="button"
                        class="btn btn-sm join-item {% if current_view != 'cards' %}btn-active{% endif %}"
                        hx-get="{% url 'lara_django_sequences:sequences-overview' %}?view=table&sort={{ current_sort }}&order={{ current_order }}&per_page={{ current_per_page }}&search={{ current_search|urlencode }}"
                        hx-target="#sequences-content"
                        hx-swap="outerHTML"
                        hx-include="#filter-form"
                        onclick="document.getElementById('current-sequence-view').value='table'">Table</button>
                <button type="button"
                        class="btn btn-sm join-item {% if current_view == 'cards' %}btn-active{% endif %}"
                        hx-get="{% url 'lara_django_sequences:sequences-overview' %}?view=cards&sort={{ current_sort }}&order={{ current_order }}&per_page={{ current_per_page }}&search={{ current_search|urlencode }}"
                        hx-target="#sequences-content"
                        hx-swap="outerHTML"
                        hx-include="#filter-form"
                        onclick="document.getElementById('current-sequence-view').value='cards'">Cards</button>
            </div>
            <button class="btn bg-red-500 text-white"
                    id="bulk-delete-btn-sequence"
                    style="display: none"
                    hx-post="{% url 'lara_django_sequences:sequence-bulk-delete' %}"
                    hx-target="#sequences-content"
                    hx-swap="outerHTML"
                    hx-include=".sequence-checkbox:checked, #current-sequence-view, #sequence-search-input, #filter-form"
                    hx-confirm="__dynamic__"
                    hx-on:htmx:confirm="event.preventDefault(); var n = getSelectedIds('sequence').length; if (confirm('Are you sure you want to delete ' + n + ' selected sequence' + (n !== 1 ? 's' : '') + '?')) event.detail.issueRequest(true);">
                Delete Selected
            </button>
            <button class="btn bg-blue-500 text-white"
                    id="bulk-duplicate-btn-sequence"
                    style="display: none"
                    hx-post="{% url 'lara_django_sequences:sequence-bulk-duplicate' %}"
                    hx-target="#sequences-content"
                    hx-swap="outerHTML"
                    hx-include=".sequence-checkbox:checked, #current-sequence-view, #sequence-search-input, #filter-form">
                Duplicate Selected
            </button>
            <a class="btn bg-green-500 text-white"
               onclick="sequences_add_modal.showModal()">Add</a>
        </div>
    </div>
    {% include "lara_django_sequences/partials/add_sequences_modal.html" %}
    <!-- Table and filter sections -->
    <div id="sequences-list-container"
         class="flex flex-col-reverse md:grid md:grid-cols-4 md:gap-6">
        <section id="sequences-list" class="col-span-4 lg:col-span-3 overflow-x-auto">
            {% include "lara_django_sequences/partials/sequences_content.html" %}
        </section>
        <section id="filters" class="hidden lg:grid col-span-1 mb-4">
            {% partial sequences-filter %}
        </section>
    </div>
</div>