{% extends "django_sample_components/pages/master_async.html" %}
{% load async_tags sample_tags %}

{% block title %}Async Lazy Popup{% endblock %}

{% block content %}
    <div class="container mt-5">
        <h1>Async Lazy Popup with HTMX</h1>
        <p class="text-muted">Modal that fetches its content from the server only when opened.</p>

        <hr>

        <div class="row">
            <div class="col-md-6">
                <h5>Load once (default)</h5>
                <p>Content is fetched only on the first open. Close and reopen — no new request:</p>
                <div class="mt-3">
                    {% async_lazy_popup name_button="Open Popup" title="Lazy Popup — Load Once" %}
                </div>
            </div>

            <div class="col-md-6">
                <h5>Reload on every open</h5>
                <p>Content is re-fetched every time the modal opens. Notice the timestamp updates:</p>
                <div class="mt-3">
                    {% async_lazy_popup name_button="Open Popup" title="Lazy Popup — Reload Always" always_reload_on_open=True %}
                </div>
            </div>
        </div>

        <hr>

        <div class="row mt-4">
            <div class="col-md-6">
                <h5>Lazy popup — Counter loaded on open</h5>
                <p>The counter is fetched from the server only when the modal is opened:</p>
                <div class="mt-3">
                    {% async_lazy_popup name_button="Open (lazy)" title="Counter — Lazy" content_url=counter_url size="sm" always_reload_on_open=True %}
                </div>
            </div>

            <div class="col-md-6">
                <h5>Regular popup — Counter rendered with the page</h5>
                <p>The counter is rendered immediately as part of the page, even before the modal opens:</p>
                <div class="mt-3">
                    {% simple_popup name_button="Open (regular)" title="Counter — Regular" size="sm" %}
                        {% async_counter initial_value=0 step=1 %}
                    {% endsimple_popup %}
                </div>
            </div>
        </div>

        <hr>

        <section class="mt-5">
            <h5>How It Works</h5>
            <ol>
                <li>Click the button — Bootstrap opens the modal immediately, showing a spinner</li>
                <li>Bootstrap fires the <code>show.bs.modal</code> event on the modal element</li>
                <li>HTMX listens for that event and sends a <code>GET</code> request to <code>content_url</code></li>
                <li>The server response replaces the spinner with the real content</li>
            </ol>

            <div class="alert alert-primary mt-3" role="alert">
                <strong><code>always_reload_on_open=True</code></strong>
                <p class="mb-0 mt-1">
                    By default, content is fetched <strong>only once</strong> — after the first load, the HTMX
                    trigger element is removed from the DOM (<code>hx-swap="outerHTML"</code>), so no further
                    requests are made.<br>
                    Set <code>always_reload_on_open=True</code> to re-fetch content <strong>every time</strong>
                    the modal opens. The trigger element persists (<code>hx-swap="innerHTML"</code>) and fires
                    on each <code>show.bs.modal</code> event. Useful for live data that must always be fresh.
                </p>
            </div>
        </section>
    </div>
{% endblock %}