{% load helpers %}

{% if job_is_pending and not has_logs %}
    <div class="text-center p-3 text-secondary">
        <span class="spinner-border spinner-border-sm me-1" role="status"></span>
        Loading logs…
    </div>
{% else %}
    {{ table_html }}
{% endif %}

{% if job_is_pending %}
    <div
        id="log-table-poller"
        class="d-none"
        hx-get="{{ log_table_url }}"
        hx-trigger="every 3s"
        hx-target="#log-table-wrapper"
        hx-swap="innerHTML"
    ></div>
{% endif %}

<script>
    (function() {
        // search default select `per_page` generated by table
        const perPageSelect = document.querySelector('#log-table-wrapper select[name="per_page"]');

        if (perPageSelect && !perPageSelect.hasAttribute('hx-get')) {
            // Delete default behaviour which omit `hx-boost`
            perPageSelect.removeAttribute('onchange');

            // build base url without params (change `per_page` should back to 1 page)
            const baseUrl = "{% url 'extras:jobresult_log-table' pk=job_result.pk %}";

            // Add htmx attributes to select
            perPageSelect.setAttribute('hx-get', baseUrl);
            perPageSelect.setAttribute('hx-target', '#log-table-wrapper');
            perPageSelect.setAttribute('hx-trigger', 'change');

            // tell htmx to initiate new added atrributes on this element
            htmx.process(perPageSelect);
        }
    })();
</script>