{% url 'streams-sync:streams' as streams_url %}
{% include 'phoxtail_core/forms/widgets/htmx/single_select_search/input.html' with widget_id="remote" search_placeholder=search_placeholder trigger_placeholder=trigger_placeholder %}
{% if selected_remote %}
    <div hx-swap-oob="innerHTML:#streams-results">
        <div hx-get="{{ streams_url }}?remote={{ selected_remote.pk }}"
             hx-trigger="load"
             hx-swap="innerHTML"
             hx-include="#streams-search-input">
            {% include "phoxtail_streams/admin/sync/partials/skeleton_grid.html" %}
        </div>
    </div>
    <div hx-swap-oob="innerHTML:#streams-notice"></div>
    <div hx-swap-oob="innerHTML:#streams-mode-control">
        {% include "phoxtail_streams/admin/sync/partials/mode_control.html" %}
    </div>
{% else %}
    <div hx-swap-oob="innerHTML:#streams-results">
        <div hx-get="{{ streams_url }}?mode=local"
             hx-trigger="load"
             hx-swap="innerHTML"
             hx-include="#streams-search-input">
            {% include "phoxtail_streams/admin/sync/partials/skeleton_grid.html" %}
        </div>
    </div>
    <div hx-swap-oob="innerHTML:#streams-notice">
        <p class="ss-local-only-notice">Viewing local assets only. Select a remote to compare and sync.</p>
    </div>
    <div hx-swap-oob="innerHTML:#streams-mode-control">
        {% include "phoxtail_streams/admin/sync/partials/mode_control.html" %}
    </div>
{% endif %}