{% extends 'django_spire/infinite_scroll/base.html' %}

{% block scroll_toolbar %}
    <div class="row {% block container_outer_class %}{% endblock %}">
        <div class="col-12">
            <div class="row align-items-end justify-content-between px-md-3">
                <div class="col">
                    <h1 class="fs-1 fw-semi-bold">
                        {% block container_title %}{% endblock %}
                    </h1>
                </div>

                <div class="col-auto">
                    {% block container_button %}{% endblock %}
                </div>
            </div>

            {% block container_filter_section %}{% endblock %}
        </div>
    </div>
{% endblock %}

{% block scroll_container %}
    <div class="row {% block container_class %}{% endblock %}">
        <div class="col-12 {% block container_content_class %}{% endblock %}">
            <div class="position-relative mt-3">
                <div
                    class="{% block container_outer_content_class %}p-3{% endblock %}"
                    style="height: calc(100vh - {{ container_offset|default:'350' }}px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;"
                    x-ref="scroll_container"
                >
                    <div x-ref="content_container" class="{% block container_content_inner_class %}{% endblock %}">
                        {% block container_content %}{% endblock %}
                    </div>

                    <div style="height: 10px;" x-ref="infinite_scroll_trigger"></div>
                </div>

                <template x-if="show_loading && !is_refreshing">
                    <div
                        class="position-absolute d-flex justify-content-center align-items-center"
                        style="top: 0; left: 0; right: 0; bottom: 0; background: color-mix(in srgb, var(--app-layer-one) 85%, transparent);"
                    >
                        <div class="spinner-border text-app-primary" role="status"></div>
                    </div>
                </template>
            </div>
        </div>
    </div>
{% endblock %}

{% block scroll_footer %}
    <div class="row mb-4 mt-3 px-md-3">
        <div class="col text-start">
            <span class="fs-7 text-app-secondary">
                Showing <span x-text="loaded_count"></span> of <span x-text="total_count"></span> items
            </span>
        </div>

        <div class="col-auto text-end">
            {% block footer_container_action %}{% endblock %}
        </div>
    </div>
{% endblock %}