{% load i18n %}

<div
    {% if live_content_config.tag_id %}id="{{ live_content_config.tag_id }}"{% endif %}
    hx-get="{{ htmx_config.request_url }}"
    hx-trigger="{{ htmx_config.trigger }}"
    hx-swap="{{ htmx_config.swap }}"
    hx-indicator=".htmx-indicator"
    aria-live="polite"
    aria-busy="false"
    tabindex="-1"
>
    {# Loading Spinner #}
    <div class="htmx-indicator" role="status">
        <div class="animate-spin w-8 h-8 border-b-2 border-insight-primary rounded-insight-full" aria-hidden="true"></div>
        <span class="ml-2 text-sm text-insight-body">{% trans 'Loading...' %}</span>
    </div>

    {# Content #}
    {% if live_content_config.initial_content %}
        {{ live_content_config.initial_content|safe }}
    {% else %}
        <div>
            <p class="text-insight-body">{% trans 'Content is loading...' %}</p>
        </div>
    {% endif %}
</div>

<script>
    document.body.addEventListener('htmx:configRequest', function(evt) {
        const target = evt.target;
        if(target.classList.contains('insight-live-content')) {
            target.setAttribute('aria-busy', 'true');
        }
    });

    document.body.addEventListener('htmx:afterSwap', function(evt) {
        const target = evt.target;
        if(target.classList.contains('insight-live-content')) {
            target.setAttribute('aria-busy', 'false');
            // Optional: Focus on updated content
            // target.focus({ preventScroll: true });
        }
    });
</script>