{% extends 'ohmyadmin/app.html' %}

{% block page_actions %}
    {% for action in page.get_page_actions(request) %}
        {{ action.render(request) }}
    {% endfor %}
{% endblock %}

{% block content %}
    {% include 'ohmyadmin/pages/table/_metrics_row.html' %}

    <div class=""
         hx-target="#data"
         hx-indicator="#load-indicator"
         data-active-filters="{{ active_filter_count }}"
         x-data="{selectedFiltersCount: parseInt($el.dataset.activeFilters), showFilterBar: parseInt($el.dataset.activeFilters) > 0}"
         @filters-activate.window="selectedFiltersCount += 1"
         @filters-deactivate.window="selectedFiltersCount -= 1;"
    >
        <!-- search and actions -->
        <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-2">
            <div class="flex gap-2 w-full md:w-auto">
                {% if filters %}
                    {% include 'ohmyadmin/pages/table/_filter_button.html' %}
                {% endif %}

                {% if page.is_searchable(request) %}
                    <div class="w-full md:w-96">
                        {% include 'ohmyadmin/pages/table/_search_form.html' %}
                    </div>
                {% endif %}
            </div>
            {% include 'ohmyadmin/pages/table/_batch_actions_form.html' %}
        </div>
        <!-- end search and actions -->

        {% if filters %}
            <div id="filter-bar"
                 hx-get hx-trigger="filters-reload"
                 hx-target="this"
                 x-show="showFilterBar">
                {% include 'ohmyadmin/pages/table/_filters.html' %}
            </div>
        {% endif %}

        <div class="mt-5">
            <div class="-mb-[1px] htmx-indicator" id="load-indicator">
                <div class="progress progress-indeterminate progress-square progress-xs">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div id="data" hx-get hx-trigger="refresh-datatable from:body" hx-target="this">
                {% include 'ohmyadmin/pages/table/_content.html' %}
            </div>
        </div>
    </div>
{% endblock %}
