{% load 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 %}
        {# Barra alineada con el layout: índice + agregar sobre el índice, tamaños centrados sobre el preview #}
        <div class="w-visual-editor__toolbar">
            <div class="w-visual-editor__toolbar-start">
                <button type="button" class="button button-secondary w-visual-editor__icon-button" data-visual-editor-tree-toggle aria-controls="visual-editor-tree">
                    <svg class="icon icon-list-ul" aria-hidden="true"><use href="#icon-list-ul"></use></svg>
                </button>
                <button type="button" class="button bicolor button--icon" data-visual-editor-add-end>
                    <span class="icon-wrapper"><svg class="icon icon-plus icon" aria-hidden="true"><use href="#icon-plus"></use></svg></span>
                    Agregar bloque
                </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="Ancho del preview">
                <button type="button" class="w-preview__size-button" data-visual-editor-device="375" aria-label="Vista previa en tamaño móvil">
                    <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="Vista previa en tamaño tableta">
                    <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="Vista previa en tamaño escritorio">
                    <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" title="Abrir el preview en una pestaña nueva" aria-label="Vista previa en nueva pestaña">
                    <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__layout" data-visual-editor-layout>
            <nav class="w-visual-editor__tree" id="visual-editor-tree" aria-label="Bloques de la página">
                <ol data-visual-editor-tree></ol>
            </nav>
            <div class="w-visual-editor__stage" data-visual-editor-stage>
                <iframe class="w-visual-editor__frame" data-visual-editor-frame title="Vista previa de la página"></iframe>
            </div>
        </div>
    {% else %}
        <p class="help-block help-info">Guardá la página una vez para usar el editor visual.</p>
    {% endif %}

    {# StreamField nativo: oculto, pero sigue siendo el que se envía al guardar #}
    <div class="w-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>Cancelar</button>
            <button type="button" class="button button-small" data-visual-editor-apply>Aplicar</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>Agregar bloque</h2>
            <button type="button" class="button button-secondary button-small" data-visual-editor-picker-cancel>Cancelar</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>Pasá el mouse sobre un bloque para ver cómo queda.</p>
                <iframe title="Preview del bloque" data-visual-editor-picker-frame hidden></iframe>
            </aside>
        </div>
    </div>
</dialog>

<script src="{% static 'wagtail_visual_editor/visual_editor.js' %}?v={{ asset_version }}" defer></script>