{% extends "phoxtail_core/modal_drawer.html" %}
{% comment %}
A variant (level 0), titled by its name: its fields and its block's, line
by line, how it stands against the remote, its previews, and Pull and
Push. A pull or push closes the drawer, and the list redraws itself; a
refused one keeps it open and says why. A remote that could not be read
answers with the reason instead.
{% endcomment %}
{% load i18n phoxtail_core_tags phoxtail_design_tags %}
{% block width %}600px{% endblock %}
{% block title %}
    {% if error %}
        {% translate "Remote unavailable" %}
    {% else %}
        {{ variant.name }}
    {% endif %}
{% endblock %}
{% block body %}
    {% if error %}
        <div class="phx-notice phx-notice--destructive">
            {% icon "warning" %}
            <p>{{ error }}</p>
        </div>
    {% else %}
        <div class="phoxtail-form-stack">
            <div class="phx-card">
                <h3 class="phx-card__title">
                    {% icon "category" %}
                    {% translate "Variant" %}
                </h3>
                <div class="sync-details">
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="text_fields" label=_("Name") value=variant.name %}
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="fingerprint" label=_("Identifier") value=variant.identifier code=True %}
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="subject" label=_("Description") value=variant.description %}
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="graph_6" label=_("Collection") value=collection.name %}
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="check_circle" label=_("Default variant") value=variant.is_default|yesno:_("Yes,No") %}
                </div>
            </div>
            <div class="phx-card">
                <h3 class="phx-card__title">
                    {% icon "widgets" %}
                    {% translate "Block" %}
                </h3>
                <div class="sync-details">
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="text_fields" label=_("Name") value=variant_block.name %}
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="fingerprint" label=_("Identifier") value=variant_block.identifier code=True %}
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="subject" label=_("Description") value=variant_block.description %}
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="style" label=_("Icon") value=variant_block.icon code=True %}
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="folder" label=_("Group") value=variant_block.group %}
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="apps" label=_("App") value=variant_block.source_app code=True %}
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="web" label=_("Page types") value=variant_block.page_types|join:", " %}
                    {% translate "Shared" context "block" as shared_label %}
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="interests" label=shared_label value=variant_block.is_shared|yesno:_("Yes,No") %}
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="page_header" label=_("Site slot") value=variant_block.site_slot %}
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="numbers" label=_("Slot order") value=variant_block.slot_order|stringformat:"d" %}
                    {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="visibility" label=_("Render in preview") value=variant_block.render_in_preview|yesno:_("Yes,No") %}
                </div>
            </div>
            {% if remote %}
                <div class="phx-card">
                    <h3 class="phx-card__title">
                        {% icon "sync" %}
                        {% translate "Sync" %}
                    </h3>
                    <div class="sync-details">
                        {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="graph_5" label=_("Remote") value=remote.name %}
                        {% include "phoxtail_streams/admin/sync/partials/detail_row.html" with icon="info" label=_("Status") value=state %}
                    </div>
                </div>
            {% endif %}
            {% if preview_form %}
                <div class="phx-card">
                    <h3 class="phx-card__title">
                        {% icon "image" %}
                        {% translate "Previews" %}
                    </h3>
                    <div class="sync-previews">
                        <div class="sync-previews__controls">
                            {% field "segmented_control" preview_form.device variant="filled" size="small" show_label=False %}
                            {% field "segmented_control" preview_form.theme variant="filled" size="small" show_label=False %}
                        </div>
                        <button type="button" class="sync-previews__screen" id="sync-previews-zoom" aria-label="{% translate "Zoom in" %}">
                            <img id="sync-previews-image" alt="{% blocktranslate with name=variant.name %}Preview of {{ name }}{% endblocktranslate %}">
                        </button>
                    </div>
                </div>
                <dialog class="sync-lightbox phx-ground" id="sync-lightbox" aria-label="{% blocktranslate with name=variant.name %}Previews of {{ name }}{% endblocktranslate %}">
                    <div class="sync-lightbox__header">
                        <span class="sync-lightbox__title" id="sync-lightbox-title"></span>
                        <button class="phoxtail-close-btn" id="sync-lightbox-close" type="button" aria-label="{% translate "Close" %}">
                            {% icon "close" %}
                        </button>
                    </div>
                    <div class="sync-lightbox__image">
                        <img id="sync-lightbox-image" alt="{% blocktranslate with name=variant.name %}Preview of {{ name }}{% endblocktranslate %}">
                    </div>
                    <div class="sync-lightbox__footer">
                        <button type="button" class="phx-button phx-button--secondary" id="sync-lightbox-prev">
                            {% icon "chevron_left" %}
                            {% translate "Previous" %}
                        </button>
                        <button type="button" class="phx-button phx-button--secondary" id="sync-lightbox-next">
                            {% translate "Next" %}
                            {% icon "chevron_right" %}
                        </button>
                    </div>
                </dialog>
                {{ preview_list|json_script:"sync-previews-data" }}
                <script>
                    (function () {
                        // The picture the device and theme pick (a theme the device has no
                        // picture for cannot be picked); a tap opens it large, where
                        // Previous and Next walk every picture.
                        var images = JSON.parse(document.getElementById('sync-previews-data').textContent);
                        var image = document.getElementById('sync-previews-image');
                        var lightbox = document.getElementById('sync-lightbox');
                        var big = document.getElementById('sync-lightbox-image');
                        var title = document.getElementById('sync-lightbox-title');
                        var labels = {desktop: 'Desktop', tablet: 'Tablet', mobile: 'Mobile', light: 'Light', dark: 'Dark'};
                        var shown = 0;

                        function radios(name) {
                            return Array.prototype.slice.call(document.querySelectorAll('input[name="preview-' + name + '"]'));
                        }

                        function checked(name) {
                            var radio = radios(name).find(function (r) { return r.checked; });
                            return radio && radio.value;
                        }

                        function pick() {
                            var device = checked('device');
                            var themes = images.filter(function (i) { return i.device === device; }).map(function (i) { return i.theme; });
                            radios('theme').forEach(function (r) { r.disabled = themes.indexOf(r.value) === -1; });
                            if (themes.indexOf(checked('theme')) === -1) {
                                radios('theme').find(function (r) { return r.value === themes[0]; }).checked = true;
                            }
                            var theme = checked('theme');
                            shown = images.findIndex(function (i) { return i.device === device && i.theme === theme; });
                            image.src = images[shown].url;
                        }

                        function show(index) {
                            shown = (index + images.length) % images.length;
                            big.src = images[shown].url;
                            title.textContent = labels[images[shown].device] + ' · ' + labels[images[shown].theme];
                        }

                        radios('device').concat(radios('theme')).forEach(function (r) { r.addEventListener('change', pick); });
                        document.getElementById('sync-previews-zoom').addEventListener('click', function () {
                            show(shown);
                            lightbox.showModal();
                        });
                        document.getElementById('sync-lightbox-close').addEventListener('click', function () { lightbox.close(); });
                        document.getElementById('sync-lightbox-prev').addEventListener('click', function () { show(shown - 1); });
                        document.getElementById('sync-lightbox-next').addEventListener('click', function () { show(shown + 1); });
                        var walk = images.length > 1;
                        document.getElementById('sync-lightbox-prev').hidden = !walk;
                        document.getElementById('sync-lightbox-next').hidden = !walk;
                        // Escape closes the picture, not the drawer behind it (modal.js closes
                        // the drawer on keyup), so the dialog handles it on keyup itself.
                        lightbox.addEventListener('cancel', function (e) { e.preventDefault(); });
                        lightbox.addEventListener('keyup', function (e) {
                            if (e.key === 'Escape') { e.stopPropagation(); lightbox.close(); }
                            if (e.key === 'ArrowLeft' && walk) show(shown - 1);
                            if (e.key === 'ArrowRight' && walk) show(shown + 1);
                        });
                        lightbox.addEventListener('click', function (e) { if (e.target === lightbox) lightbox.close(); });
                        pick();
                    })();
                </script>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}
{% block actions %}
    {% if not error %}
        {% if local_variant_id and remote_id %}
            <form class="sync-action"
                  hx-post="{% url 'streams-sync:push' %}"
                  hx-swap="none"
                  hx-disabled-elt="#base-modal .phoxtail-drawer__footer button">
                {% csrf_token %}
                <input type="hidden" name="remote_id" value="{{ remote_id }}">
                <input type="hidden" name="variant_id" value="{{ local_variant_id }}">
                <button type="submit"
                        class="phx-button phx-button--secondary"
                        {% if sync_state == 'in_sync' or sync_state == 'unknown' %}disabled{% endif %}>
                    {% icon "cloud_upload" %}
                    <span>{% translate "Push" %}</span>
                </button>
            </form>
        {% else %}
            <button type="button" class="phx-button phx-button--secondary" disabled>
                {% icon "cloud_upload" %}
                <span>{% translate "Push" %}</span>
            </button>
        {% endif %}
        {% if remote_variant_id %}
            <form class="sync-action"
                  hx-post="{% url 'streams-sync:pull' %}"
                  hx-swap="none"
                  hx-disabled-elt="#base-modal .phoxtail-drawer__footer button">
                {% csrf_token %}
                <input type="hidden" name="remote_id" value="{{ remote_id }}">
                <input type="hidden" name="variant_id" value="{{ remote_variant_id }}">
                <button type="submit"
                        class="phx-button phx-button--primary"
                        {% if sync_state == 'in_sync' %}disabled{% endif %}>
                    {% icon "download" %}
                    <span>{% translate "Pull" %}</span>
                </button>
            </form>
        {% else %}
            <button type="button" class="phx-button phx-button--primary" disabled>
                {% icon "download" %}
                <span>{% translate "Pull" %}</span>
            </button>
        {% endif %}
    {% endif %}
{% endblock %}