{% load phoxtail_design_tags %}
{% url 'streams-sync:remote_select' as remote_select_url %}
{% url 'streams-sync:streams' as streams_url %}

<!-- Page Header -->
<div class="ss-page-header">
    <div class="ss-page-header__inner">
        <div class="ss-page-header__title-section">
            <h1 class="ss-page-header__title">
                {% icon "sync" %}
                Sync
            </h1>
        </div>
        <div class="ss-page-header__controls">
            <div id="streams-mode-control">{% include "phoxtail_streams/admin/sync/partials/mode_control.html" %}</div>
            <div class="ss-search-form">
                <div class="ss-search-wrap">
                    <div class="ss-search-icon-wrap">
                        <div id="streams-search-icon">{% icon "search" %}</div>
                        <button type="button"
                                id="streams-clear-search"
                                class="ss-search-clear ss-search-hidden"
                                aria-label="Clear search">
                            {% icon "close" %}
                        </button>
                    </div>
                    <input type="text"
                           id="streams-search-input"
                           name="q"
                           value="{{ q|default:'' }}"
                           placeholder="Search variants"
                           class="ss-search-input"
                           hx-get="{{ streams_url }}"
                           hx-target="#streams-results"
                           hx-swap="innerHTML"
                           hx-include="#remote-selected-value"
                           hx-vals='js:{mode: document.getElementById("{{ mode_field.id_for_label }}_local").checked ? "local" : "remote"}'
                           hx-trigger="input changed delay:300ms">
                    <span id="streams-results-count" class="ss-search-results-count">
                        {% if total is not None %}
                            {% if total > 99 %}99+ results{% else %}{{ total }} result{{ total|pluralize }}{% endif %}
                        {% endif %}
                    </span>
                </div>
            </div>
            {% if remotes %}
                {% include 'phoxtail_core/forms/widgets/htmx/single_select_search.html' with field=remote_select_field widget_id="remote" search_url=remote_select_url search_placeholder="Search remotes" trigger_placeholder="Select remote" %}
            {% endif %}
            <script>
                (function () {
                    var input = document.getElementById('streams-search-input');
                    var clearBtn = document.getElementById('streams-clear-search');
                    var icon = document.getElementById('streams-search-icon');
                    if (!input) return;
                    if (input.value.trim().length > 0) {
                        icon.classList.add('ss-search-hidden');
                        clearBtn.classList.remove('ss-search-hidden');
                    }
                    clearBtn.addEventListener('click', function () {
                        input.value = '';
                        icon.classList.remove('ss-search-hidden');
                        clearBtn.classList.add('ss-search-hidden');
                        htmx.trigger(input, 'input');
                    });
                    input.addEventListener('input', function () {
                        if (this.value.trim().length > 0) {
                            icon.classList.add('ss-search-hidden');
                            clearBtn.classList.remove('ss-search-hidden');
                        } else {
                            icon.classList.remove('ss-search-hidden');
                            clearBtn.classList.add('ss-search-hidden');
                        }
                    });
                })();
            </script>
        </div>
    </div>
</div>

<template id="streams-skeleton-tpl">{% include "phoxtail_streams/admin/sync/partials/skeleton_grid.html" %}</template>
<script>
    (function () {
        document.body.addEventListener('htmx:beforeRequest', function (e) {
            var target = e.detail && e.detail.target;
            if (target && target.id === 'streams-results') {
                var tpl = document.getElementById('streams-skeleton-tpl');
                if (tpl) target.innerHTML = tpl.innerHTML;
            }
        });
    })();
</script>

<!-- Streams panel -->
<div class="ss-streams-panel">
    <div id="streams-notice">
    {% if no_remotes %}
    {% url 'remotes:index' as remotes_settings_url %}
    <p class="ss-local-only-notice">Viewing local assets only. <a href="{{ remotes_settings_url }}">Connect a remote</a> to compare and sync.</p>
    {% elif locked_local %}
    <p class="ss-local-only-notice">Viewing local assets only. Select a remote to compare and sync.</p>
    {% endif %}
    </div>
    <div id="streams-results"
         {% if remote_select_field.selected_item %}
         hx-get="{{ streams_url }}?remote={{ remote_select_field.selected_item.pk }}"
         hx-trigger="load"
         hx-swap="innerHTML"
         {% else %}
         hx-get="{{ streams_url }}?mode=local"
         hx-trigger="load"
         hx-swap="innerHTML"
         {% endif %}>
        {% include "phoxtail_streams/admin/sync/partials/skeleton_grid.html" %}
    </div>
</div>