{% load phoxtail_design_tags phoxtail_core_tags %}
{% url 'streams-sync:remote_select' as remote_select_url %}
{% url 'streams-sync:streams' as streams_url %}
{% include "phoxtail_streams/admin/sync/partials/header.html" %}
<div id="streams-notice">{% include "phoxtail_streams/admin/sync/partials/notice.html" %}</div>
<template id="streams-skeleton-tpl">{% include "phoxtail_streams/admin/sync/partials/skeleton_grid.html" %}</template>
<script>
    (function () {
        // A request for the list from outside it shows the skeleton while it loads;
        // the list's own parts (the paginator, a loader) keep what they show.
        var streamsUrl = '{{ streams_url }}';
        document.body.addEventListener('htmx:beforeRequest', function (e) {
            var path = (e.detail.requestConfig || {}).path || '';
            var results = document.getElementById('streams-results');
            var tpl = document.getElementById('streams-skeleton-tpl');
            if (path.indexOf(streamsUrl) !== 0 || !results || !tpl) return;
            if (e.detail.elt !== results && results.contains(e.detail.elt)) return;
            results.innerHTML = tpl.innerHTML;
        });
    })();
</script>
<!-- Variants: drawn on load, and again whenever a variant changes, keeping the remote, mode, search and page -->
<div id="streams-results"
     hx-get="{{ streams_url }}"
     hx-trigger="load, {% changed_event 'phoxtail_streams.BlockVariant' %} from:body"
     hx-include="#remote-selected-value, #streams-mode-control, #sync-search-form"
     hx-swap="none"
     hx-disinherit="*">{% include "phoxtail_streams/admin/sync/partials/skeleton_grid.html" %}</div>