{% load i18n static %}
<link rel="stylesheet" href="{% static 'wagtail_visual_editor/visual_editor.css' %}?v={{ asset_version }}">

<div class="w-visual-editor" data-visual-editor data-field-name="{{ field_name }}" data-preview-url="{{ preview_url|default:'' }}" data-frontend-origin="{{ frontend_origin }}">
    {% if preview_url %}
        {# Si el frontend no responde, se vuelve al StreamField nativo (ver fallBack en visual_editor.js) #}
        <div class="help-block help-warning w-visual-editor__unreachable" data-visual-editor-unreachable hidden>
            <span data-visual-editor-unreachable-text></span>
            <button type="button" class="button button-small button-secondary" data-visual-editor-retry>{% trans "Retry" %}</button>
        </div>
        <div class="w-visual-editor__layout" data-visual-editor-layout>
            <div class="w-visual-editor__sidebar">
                <button type="button" class="w-visual-editor__add" data-visual-editor-add-end>
                    <span class="w-visual-editor__add-icon"><svg class="icon icon-plus" aria-hidden="true"><use href="#icon-plus"></use></svg></span>
                    {% trans "Add block" %}
                </button>
                <nav class="w-visual-editor__tree" id="visual-editor-tree" aria-label="{% trans 'Page blocks' %}">
                    <ol data-visual-editor-tree></ol>
                </nav>
            </div>
            {# El preview con su barra: pantalla completa (oculta el índice), tamaños al centro, tiempo y pestaña nueva #}
            <div class="w-visual-editor__preview">
                <div class="w-visual-editor__toolbar">
                    <div class="w-visual-editor__toolbar-start">
                        <button type="button" class="w-visual-editor__fullscreen" data-visual-editor-tree-toggle aria-controls="visual-editor-tree">
                            <svg class="icon icon-expand-right" aria-hidden="true"><use href="#icon-expand-right"></use></svg>
                            <span data-visual-editor-tree-toggle-label></span>
                        </button>
                    </div>
                    {# Mismos botones de tamaño que el preview nativo de Wagtail (clases w-preview__*) #}
                    <div class="w-preview__sizes w-visual-editor__devices" role="group" aria-label="{% trans 'Preview width' %}">
                        <button type="button" class="w-preview__size-button" data-visual-editor-device="375" aria-label="{% trans 'Preview in mobile size' %}">
                            <svg class="icon icon-mobile-alt icon" aria-hidden="true"><use href="#icon-mobile-alt"></use></svg>
                        </button>
                        <button type="button" class="w-preview__size-button" data-visual-editor-device="768" aria-label="{% trans 'Preview in tablet size' %}">
                            <svg class="icon icon-tablet-alt icon" aria-hidden="true"><use href="#icon-tablet-alt"></use></svg>
                        </button>
                        <button type="button" class="w-preview__size-button" data-visual-editor-device="0" aria-label="{% trans 'Preview in desktop size' %}">
                            <svg class="icon icon-desktop icon" aria-hidden="true"><use href="#icon-desktop"></use></svg>
                        </button>
                    </div>
                    <div class="w-visual-editor__toolbar-end">
                        <span class="w-visual-editor__timing" data-visual-editor-timing aria-live="polite"></span>
                        <a href="{{ preview_url }}" target="_blank" rel="noreferrer" class="w-preview__size-button" data-visual-editor-new-tab title="{% trans 'Preview in new tab' %}" aria-label="{% trans 'Preview in new tab' %}">
                            <svg class="icon icon-link-external icon" aria-hidden="true"><use href="#icon-link-external"></use></svg>
                        </a>
                    </div>
                </div>
                <div class="w-visual-editor__stage" data-visual-editor-stage>
                    <iframe class="w-visual-editor__frame" data-visual-editor-frame title="{% trans 'Page preview' %}"></iframe>
                </div>
            </div>
        </div>
    {% else %}
        <p class="help-block help-info">{% trans "Save the page once to use the visual editor." %}</p>
    {% endif %}

    {# StreamField nativo: oculto, pero sigue siendo el que se envía al guardar #}
    <div class="w-visual-editor__native" data-visual-editor-native {% if preview_url %}hidden{% endif %}>
        {% include "wagtailadmin/panels/field_panel.html" %}
    </div>
</div>

<dialog class="w-visual-editor__modal" data-visual-editor-modal>
    <div class="w-visual-editor__modal-inner">
        <header class="w-visual-editor__modal-header">
            <h2 data-visual-editor-modal-title></h2>
            <button type="button" class="button button-secondary button-small" data-visual-editor-cancel>{% trans "Cancel" %}</button>
            <button type="button" class="button button-small" data-visual-editor-apply>{% trans "Apply" %}</button>
        </header>
        <div class="w-visual-editor__modal-body" data-visual-editor-modal-body></div>
    </div>
</dialog>

<dialog class="w-visual-editor__modal" data-visual-editor-picker>
    <div class="w-visual-editor__modal-inner">
        <header class="w-visual-editor__modal-header">
            <h2>{% trans "Add block" %}</h2>
            <button type="button" class="button button-secondary button-small" data-visual-editor-picker-cancel>{% trans "Cancel" %}</button>
        </header>
        <div class="w-visual-editor__picker-layout">
            <div class="w-visual-editor__modal-body" data-visual-editor-picker-body></div>
            <aside class="w-visual-editor__picker-preview" data-visual-editor-picker-preview data-url="{% url 'wagtailadmin_block_preview' %}">
                <p data-visual-editor-picker-hint></p>
                <iframe title="{% trans 'Block preview' %}" data-visual-editor-picker-frame hidden></iframe>
            </aside>
        </div>
    </div>
</dialog>

{{ strings|json_script:"visual-editor-strings" }}
<script src="{% static 'wagtail_visual_editor/visual_editor.js' %}?v={{ asset_version }}" defer></script>