{% extends 'admin/base.html' %}

{% block title %}
{%- if mode == 'new' %}{{ t('popup_manager.form_new_title') }}
{%- elif mode == 'translate' %}{{ t('popup_manager.form_translate_title') }}
{%- else %}{{ t('popup_manager.form_edit_title') }}{% endif -%}
{% endblock %}

{% block content %}
<div class="page-header page-header--with-action">
    <div class="page-header__content">
        {% if mode == 'new' %}
        <h2>💬 {{ t('popup_manager.form_new_title') }}</h2>
        {% elif mode == 'translate' %}
        <h2>🌍 {{ t('popup_manager.form_translate_title') }}</h2>
        {% else %}
        <h2>💬 {{ t('popup_manager.form_edit_title') }}</h2>
        {% endif %}
    </div>
    <div class="btn-group">
        <button type="submit" form="popupForm" class="btn btn-primary btn-sm">💾 {{ t('common.save') }}</button>
        <a href="{{ url_for('popup_manager.list_popups') }}" class="btn btn-secondary btn-sm">{{ t('common.cancel') }}</a>
        {% if mode == 'edit' %}
        <form method="POST" action="{{ url_for('popup_manager.delete_popup', popup_id=popup.id) }}" class="d-inline" id="pmDeleteForm">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-danger">🗑️ {{ t('popup_manager.delete_version') }}</button>
        </form>
        {% endif %}
    </div>
</div>

{% if mode == 'translate' %}
<div class="source-info">
    <h4>💬 {{ t('translate.source_page') }} ({{ source.get_language_name() }})</h4>
    <p><strong>{{ source.name }}</strong>{% if source.title %} — {{ source.title }}{% endif %}</p>
    <a href="{{ url_for('popup_manager.edit_popup', popup_id=source.id) }}">← {{ t('translate.back_to_original') }}</a>
</div>
{% endif %}

<form method="POST" id="popupForm" class="container-xl">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="editor-layout">
        <!-- ============================================================ -->
        <!-- MAIN CONTENT (left) — mirrors the posts/pages editor layout -->
        <!-- ============================================================ -->
        <div class="editor-main">
            <div class="form-group">
                <label for="title">{{ t('popup_manager.title_label') }}</label>
                <input type="text" id="title" name="title" maxlength="300"
                       value="{{ (popup.title if popup else (source.title if source else '')) or '' }}">
                <div class="help-text">{{ t('popup_manager.title_help') }}</div>
            </div>

            <div class="form-group">
                <label>{{ t('popup_manager.content_label') }}</label>
                <div class="pm-editor">
                    <div class="pm-toolbar" role="toolbar">
                    <button type="button" class="pm-tb" data-block="p" title="{{ t('popup_manager.paragraph') }}">¶</button>
                    <button type="button" class="pm-tb" data-block="h2" title="{{ t('builder.heading') }} 2">H2</button>
                    <button type="button" class="pm-tb" data-block="h3" title="{{ t('builder.heading') }} 3">H3</button>
                    <span class="pm-sep"></span>
                    <button type="button" class="pm-tb" data-cmd="bold" title="{{ t('builder.bold') }}"><svg viewBox="0 0 24 24"><path d="M6 4h8a4 4 0 014 4 4 4 0 01-4 4H6z"/><path d="M6 12h9a4 4 0 014 4 4 4 0 01-4 4H6z"/></svg></button>
                    <button type="button" class="pm-tb" data-cmd="italic" title="{{ t('builder.italic') }}"><svg viewBox="0 0 24 24"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg></button>
                    <button type="button" class="pm-tb" data-cmd="underline" title="{{ t('builder.underline') }}"><svg viewBox="0 0 24 24"><path d="M6 3v7a6 6 0 006 6 6 6 0 006-6V3"/><line x1="4" y1="21" x2="20" y2="21"/></svg></button>
                    <button type="button" class="pm-tb" data-cmd="strikeThrough" title="{{ t('builder.strikethrough') }}"><svg viewBox="0 0 24 24"><line x1="4" y1="12" x2="20" y2="12"/><path d="M17.3 4.9C16.2 4 14.7 3.5 13 3.5c-3.6 0-5.5 2-5.5 4 0 .7.2 1.4.5 2"/><path d="M8 14.5c0 3 2.5 5 6 5 1.8 0 3.3-.5 4.3-1.4"/></svg></button>
                    <span class="pm-sep"></span>
                    <button type="button" class="pm-tb" data-align="pm-ta-left" title="{{ t('builder.align_left') }}"><svg viewBox="0 0 24 24"><line x1="17" y1="10" x2="3" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="17" y1="18" x2="3" y2="18"/></svg></button>
                    <button type="button" class="pm-tb" data-align="pm-ta-center" title="{{ t('builder.align_center') }}"><svg viewBox="0 0 24 24"><line x1="18" y1="10" x2="6" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="18" y1="18" x2="6" y2="18"/></svg></button>
                    <button type="button" class="pm-tb" data-align="pm-ta-right" title="{{ t('builder.align_right') }}"><svg viewBox="0 0 24 24"><line x1="21" y1="10" x2="7" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="21" y1="18" x2="7" y2="18"/></svg></button>
                    <span class="pm-sep"></span>
                    <button type="button" class="pm-tb" data-cmd="insertUnorderedList" title="{{ t('builder.bullet_list') }}"><svg viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><circle cx="4" cy="6" r="1" fill="currentColor" stroke="none"/><circle cx="4" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="4" cy="18" r="1" fill="currentColor" stroke="none"/></svg></button>
                    <button type="button" class="pm-tb" data-cmd="insertOrderedList" title="{{ t('builder.numbered_list') }}"><svg viewBox="0 0 24 24"><line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><text x="3" y="8" font-size="7" fill="currentColor" stroke="none">1</text><text x="3" y="14" font-size="7" fill="currentColor" stroke="none">2</text><text x="3" y="20" font-size="7" fill="currentColor" stroke="none">3</text></svg></button>
                    <span class="pm-sep"></span>
                    <button type="button" class="pm-tb" data-action="link" title="{{ t('builder.link') }}"><svg viewBox="0 0 24 24"><path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/></svg></button>
                    <button type="button" class="pm-tb" data-cmd="removeFormat" title="{{ t('builder.clear_formatting') }}"><svg viewBox="0 0 24 24"><path d="M4 7V4h16v3"/><path d="M9 20h6"/><path d="M12 4v16"/><line x1="3" y1="21" x2="21" y2="3" stroke-width="1.5"/></svg></button>
                    <span class="pm-sep"></span>
                    <button type="button" class="pm-tb pm-tb--wide" data-action="btn-primary" title="{{ t('popup_manager.insert_primary') }}">▣ {{ t('popup_manager.insert_primary') }}</button>
                    <button type="button" class="pm-tb pm-tb--wide" data-action="btn-outline" title="{{ t('popup_manager.insert_outline') }}">▢ {{ t('popup_manager.insert_outline') }}</button>
                </div>
                <div id="pm-content" class="pm-content" contenteditable="true">{{ content_html|safe }}</div>
                </div>
                <textarea name="content" id="pm-content-field" hidden></textarea>
                <div class="help-text">{{ t('popup_manager.content_help') }} {{ t('popup_manager.button_edit_hint') }}</div>
            </div>
        </div>

        <!-- ============================================================ -->
        <!-- SIDEBAR (right) — all options live here, like posts/pages   -->
        <!-- ============================================================ -->
        <div class="editor-sidebar">
            <!-- Status & Language -->
            <div class="form-section">
                <h3>📊 {{ t('editor.status_section') }}</h3>

                {% if mode != 'translate' %}
                <div class="form-group">
                    <label class="pm-check">
                        <input type="checkbox" name="enabled" {% if popup and popup.enabled %}checked{% endif %}>
                        {{ t('popup_manager.enabled_label') }}
                    </label>
                    <div class="help-text">{{ t('popup_manager.enabled_help') }}</div>
                </div>

                <div class="form-group">
                    <label for="name" class="required">{{ t('popup_manager.name_label') }}</label>
                    <input type="text" id="name" name="name" required maxlength="200"
                           value="{{ popup.name if popup else '' }}">
                    <div class="help-text">{{ t('popup_manager.name_help') }}</div>
                </div>
                {% endif %}

                <div class="form-group">
                    <label for="language">{{ t('editor.language_label') }}</label>
                    {% if mode == 'new' %}
                    <select id="language" name="language">
                        {% for lang in language_choices %}
                        <option value="{{ lang.code }}" {% if lang.code == default_language %}selected{% endif %}>{{ lang.name }}</option>
                        {% endfor %}
                    </select>
                    {% elif mode == 'translate' %}
                    <select id="language" name="language" required>
                        <option value="">{{ t('translate.select_language_option') }}</option>
                        {% for lang in missing_languages %}
                        <option value="{{ lang.code }}" {% if lang.code == preselect_lang %}selected{% endif %}>{{ lang.name }}</option>
                        {% endfor %}
                    </select>
                    {% else %}
                    <div><span class="lang-badge">{{ popup.language|upper }}</span> {{ popup.get_language_name() }}</div>
                    {% endif %}
                </div>

                {% if mode == 'translate' %}
                <div class="help-text">{{ t('popup_manager.behavior_note') }}</div>
                {% endif %}
            </div>

            {% if mode == 'edit' %}
            <!-- Translations — native core component.
                 Placed right after Status, matching the posts/pages sidebar order
                 (the plugin has no Quick Actions / AI Tools sections). -->
            <div class="form-section">
                <h3>🌍 {{ t('translate.translations_title') }}</h3>

                <div class="mb-3">
                    <span class="current-lang-badge">{{ popup.get_language_name() }}</span>
                    <span class="text-sm text-muted ml-1">— {{ t('translate.this_version') }}</span>
                </div>

                {% set translations = popup.get_translations() %}
                {% if translations %}
                <ul class="translation-list">
                    {% for tr in translations %}
                    <li class="translation-item">
                        <span class="translation-lang">{{ tr.get_language_name() }}</span>
                        <a href="{{ url_for('popup_manager.edit_popup', popup_id=tr.id) }}" class="translation-link">{{ t('table.edit') }} →</a>
                    </li>
                    {% endfor %}
                </ul>
                {% else %}
                <p class="sidebar-meta">{{ t('translate.no_translations_yet') }}</p>
                {% endif %}

                {% if popup.get_missing_languages() %}
                <div class="mt-3">
                    <a href="{{ url_for('popup_manager.translate_popup', popup_id=popup.id) }}" class="btn btn-secondary btn-sm">🌍 {{ t('translate.create_translation') }}</a>
                </div>
                {% endif %}
            </div>
            {% endif %}

            {% if mode != 'translate' %}
            <!-- Behavior -->
            <div class="form-section">
                <h3>⚙️ {{ t('popup_manager.behavior_title') }}</h3>
                <p class="help-text">{{ t('popup_manager.behavior_note') }}</p>

                <div class="form-group">
                    <label>{{ t('popup_manager.trigger_label') }}</label>
                    {% set trig = popup.trigger_type if popup else 'delay' %}
                    <label class="pm-check"><input type="radio" name="trigger_type" value="immediate" {% if trig == 'immediate' %}checked{% endif %}> {{ t('popup_manager.trigger_immediate') }}</label>
                    <label class="pm-check"><input type="radio" name="trigger_type" value="delay" {% if trig == 'delay' %}checked{% endif %}> {{ t('popup_manager.trigger_delay') }}
                        <input type="number" name="delay_seconds" min="0" max="600" value="{{ popup.delay_seconds if popup else 3 }}" class="pm-num"> {{ t('popup_manager.delay_seconds_label') }}</label>
                    <label class="pm-check"><input type="radio" name="trigger_type" value="scroll" {% if trig == 'scroll' %}checked{% endif %}> {{ t('popup_manager.trigger_scroll') }}
                        <input type="number" name="scroll_percent" min="1" max="100" value="{{ popup.scroll_percent if popup else 50 }}" class="pm-num"> %</label>
                    <label class="pm-check"><input type="radio" name="trigger_type" value="exit" {% if trig == 'exit' %}checked{% endif %}> {{ t('popup_manager.trigger_exit') }}</label>
                </div>

                <div class="form-group">
                    <label>{{ t('popup_manager.frequency_label') }}</label>
                    {% set freq = popup.frequency if popup else 'days' %}
                    <label class="pm-check"><input type="radio" name="frequency" value="every" {% if freq == 'every' %}checked{% endif %}> {{ t('popup_manager.freq_every') }}</label>
                    <label class="pm-check"><input type="radio" name="frequency" value="days" {% if freq == 'days' %}checked{% endif %}> {{ t('popup_manager.freq_days') }}
                        <input type="number" name="frequency_days" min="1" max="365" value="{{ popup.frequency_days if popup else 7 }}" class="pm-num"> {{ t('popup_manager.days_label') }}</label>
                    <label class="pm-check"><input type="radio" name="frequency" value="once" {% if freq == 'once' %}checked{% endif %}> {{ t('popup_manager.freq_once') }}</label>
                </div>

                <div class="form-group">
                    <label class="pm-check">
                        <input type="checkbox" name="fallback_default_lang" {% if popup and popup.fallback_default_lang %}checked{% endif %}>
                        {{ t('popup_manager.fallback_label') }}
                    </label>
                    <div class="help-text">{{ t('popup_manager.fallback_help') }}</div>
                </div>
            </div>

            <!-- Targeting -->
            <div class="form-section">
                <h3>📍 {{ t('popup_manager.target_label') }}</h3>
                {% set tgt = popup.target_type if popup else 'all' %}
                <label class="pm-check"><input type="radio" name="target_type" value="all" {% if tgt == 'all' %}checked{% endif %} onchange="pmToggleTargets()"> {{ t('popup_manager.target_all') }}</label>
                <label class="pm-check"><input type="radio" name="target_type" value="custom" {% if tgt == 'custom' %}checked{% endif %} onchange="pmToggleTargets()"> {{ t('popup_manager.target_custom') }}</label>

                <div id="pm-targets" class="pm-targets" {% if tgt != 'custom' %}hidden{% endif %}>
                    <input type="text" id="pm-target-filter" placeholder="{{ t('popup_manager.target_filter_placeholder') }}" oninput="pmFilterTargets(this.value)">
                    <div class="pm-targets__list">
                        <label class="pm-check" data-pm-target-label="🏠">
                            <input type="checkbox" name="targets" value="home" {% if 'home' in selected_targets %}checked{% endif %}>
                            🏠 {{ t('popup_manager.target_home') }}
                        </label>
                        {% for c in content_choices %}
                        <label class="pm-check" data-pm-target-label="{{ c.title|lower }}">
                            <input type="checkbox" name="targets" value="{{ c.group }}" {% if c.group in selected_targets %}checked{% endif %}>
                            {% if c.kind == 'page' %}📄 {{ t('popup_manager.kind_page') }}{% else %}📝 {{ t('popup_manager.kind_post') }}{% endif %}: {{ c.title }}
                        </label>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}

            {% if mode == 'edit' %}
            <!-- Timestamps — same closing section as posts/pages -->
            <div class="form-section">
                <h3>📅 {{ t('editor.info') }}</h3>
                <p class="sidebar-meta">
                    <strong>{{ t('editor.created') }}</strong><br>
                    {{ popup.created_at|format_datetime }}
                </p>
                <p class="sidebar-meta">
                    <strong>{{ t('editor.last_updated') }}</strong><br>
                    {{ popup.updated_at|format_datetime }}
                </p>
            </div>
            {% endif %}
        </div>
    </div>
</form>

<style>
/* All colors below come from the admin design tokens (--adm-*), defined in
   admin.css for both light and dark mode (body[data-theme="dark"]).
   No own palette, no hex fallbacks — the plugin inherits the unified admin
   look in both modes automatically. */

/* Editor container — mirrors the native input pattern */
.pm-editor { border: 1px solid var(--adm-input-border); border-radius: var(--adm-radius);
    background: var(--adm-surface); overflow: hidden;
    transition: border-color var(--adm-transition), box-shadow var(--adm-transition); }
.pm-editor:focus-within { border-color: var(--adm-primary);
    box-shadow: 0 0 0 3px var(--adm-primary-subtle); }

/* Toolbar */
.pm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px;
    background: var(--adm-surface-alt);
    border-bottom: 1px solid var(--adm-border-light); }
.pm-tb { min-width: 30px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    gap: 4px; background: none; border: none; border-radius: var(--adm-radius-sm); padding: 0 5px;
    color: var(--adm-text-secondary); cursor: pointer;
    font: inherit; font-size: 12px; font-weight: 600;
    transition: background var(--adm-transition), color var(--adm-transition); }
.pm-tb:hover { background: var(--adm-primary-subtle); color: var(--adm-text); }
.pm-tb svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; }
.pm-tb--wide { padding: 0 10px; font-weight: 500; }
.pm-sep { width: 1px; height: 18px; background: var(--adm-border-light); margin: 0 4px; flex-shrink: 0; }

/* Editing surface */
.pm-content { min-height: 220px; max-height: 480px; overflow-y: auto; padding: 14px 16px; outline: none;
    line-height: 1.55; color: var(--adm-text); background: var(--adm-surface); }
.pm-content h2, .pm-content h3, .pm-content h4 { margin: .6em 0 .35em; line-height: 1.3;
    color: var(--adm-text); }
.pm-content p { margin: 0 0 .6em; }
.pm-content ul, .pm-content ol { margin: 0 0 .6em; padding-inline-start: 1.4em; }
.pm-content blockquote { margin: 0 0 .6em; padding-inline-start: 12px;
    border-inline-start: 3px solid var(--adm-border); color: var(--adm-text-secondary); }
.pm-content a:not(.ap-btn) { color: var(--adm-primary); }

/* Editor preview of theme buttons — colored exactly like the admin's own
   .btn-primary / secondary patterns (the real public look comes from the
   active theme's ap-btn styles). #f0f2f5 mirrors admin.css .btn-primary. */
.pm-content a.ap-btn { display: inline-flex; padding: 6px 14px; border-radius: var(--adm-radius-sm);
    text-decoration: none; font-weight: 500; margin-block: 2px; margin-inline-end: 6px; cursor: pointer;
    border: 1px solid transparent; }
.pm-content a.ap-btn--primary { background: var(--adm-primary); color: #f0f2f5;
    border-color: var(--adm-primary); }
.pm-content a.ap-btn--outline { background: transparent; color: var(--adm-primary);
    border-color: var(--adm-primary); }
.pm-ta-left { text-align: left; } .pm-ta-center { text-align: center; }
.pm-ta-right { text-align: right; } .pm-ta-justify { text-align: justify; }

/* Behaviour section */
.pm-check { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 400;
    flex-wrap: wrap; color: var(--adm-text); }
.pm-num { width: 84px; }
.pm-targets { margin-top: 10px; }
.pm-targets__list { max-height: 260px; overflow-y: auto; margin-top: 8px; padding: 8px 10px;
    border: 1px solid var(--adm-border); border-radius: var(--adm-radius);
    background: var(--adm-surface); }
</style>

<script>
(function () {
    'use strict';
    var editor = document.getElementById('pm-content');
    var field = document.getElementById('pm-content-field');
    var form = document.getElementById('popupForm');
    var toolbar = document.querySelector('.pm-toolbar');

    var BTN_TEXT = {{ t('popup_manager.button_default_text')|tojson }};
    var BTN_TEXT_PROMPT = {{ t('popup_manager.button_text_prompt')|tojson }};
    var BTN_EDIT_PROMPT = {{ t('popup_manager.button_edit_prompt')|tojson }};
    var LINK_PROMPT = {{ t('popup_manager.link_prompt')|tojson }};

    // Theme buttons are atomic in the editor: contenteditable="false" keeps
    // the caret from falling inside, so typing or Backspace can't tear the
    // button apart — it moves/deletes as one unit. Text and URL are edited
    // via their own input prompts (insert and click-to-edit).
    function lockButtons() {
        var btns = editor.querySelectorAll('a.ap-btn');
        for (var i = 0; i < btns.length; i++) {
            btns[i].setAttribute('contenteditable', 'false');
        }
    }
    lockButtons();

    // ── Toolbar ────────────────────────────────────────────────────────
    toolbar.addEventListener('mousedown', function (e) { e.preventDefault(); });
    toolbar.addEventListener('click', function (e) {
        var btn = e.target.closest('.pm-tb');
        if (!btn) return;
        editor.focus();
        if (btn.dataset.cmd) {
            document.execCommand(btn.dataset.cmd, false, null);
        } else if (btn.dataset.block) {
            document.execCommand('formatBlock', false, btn.dataset.block.toUpperCase());
        } else if (btn.dataset.align) {
            applyAlign(btn.dataset.align);
        } else if (btn.dataset.action === 'link') {
            var url = window.prompt(LINK_PROMPT, 'https://');
            if (url) document.execCommand('createLink', false, url.trim());
        } else if (btn.dataset.action === 'btn-primary') {
            insertThemeButton('ap-btn ap-btn--primary');
        } else if (btn.dataset.action === 'btn-outline') {
            insertThemeButton('ap-btn ap-btn--outline');
        }
    });

    function blockOf(node) {
        var blocks = { P: 1, H2: 1, H3: 1, H4: 1, LI: 1, BLOCKQUOTE: 1 };
        while (node && node !== editor) {
            if (node.nodeType === 1 && blocks[node.tagName]) return node;
            node = node.parentNode;
        }
        return null;
    }

    function applyAlign(cls) {
        var sel = window.getSelection();
        if (!sel.rangeCount) return;
        var block = blockOf(sel.anchorNode) || blockOf(sel.focusNode);
        if (!block) return;
        var was = block.classList.contains(cls);
        block.classList.remove('pm-ta-left', 'pm-ta-center', 'pm-ta-right', 'pm-ta-justify');
        if (!was && cls !== 'pm-ta-left') block.classList.add(cls);
    }

    function insertThemeButton(classes) {
        var sel = window.getSelection();
        var preset = BTN_TEXT;
        if (sel.rangeCount && !sel.isCollapsed) {
            preset = sel.toString().trim() || BTN_TEXT;
        }
        var text = window.prompt(BTN_TEXT_PROMPT, preset);
        if (text === null) return;
        text = text.trim() || BTN_TEXT;
        var url = window.prompt(LINK_PROMPT, 'https://');
        if (!url) return;
        var html = '<a class="' + classes + '" contenteditable="false" href="'
            + escAttr(url.trim()) + '">' + escHtml(text) + '</a>&nbsp;';
        document.execCommand('insertHTML', false, html);
        lockButtons();
    }

    // Click a button in the editor to edit its text and URL.
    // Empty text removes the button.
    editor.addEventListener('click', function (e) {
        var btn = e.target.closest ? e.target.closest('a.ap-btn') : null;
        if (!btn || !editor.contains(btn)) return;
        e.preventDefault();
        var text = window.prompt(BTN_EDIT_PROMPT, btn.textContent);
        if (text === null) return;
        if (!text.trim()) { btn.parentNode.removeChild(btn); return; }
        btn.textContent = text.trim();
        var url = window.prompt(LINK_PROMPT, btn.getAttribute('href') || 'https://');
        if (url && url.trim()) btn.setAttribute('href', url.trim());
    });

    function escHtml(s) { return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;'); }
    function escAttr(s) { return escHtml(s).replace(/"/g, '&quot;'); }

    // ── Paste sanitisation (adapted from the core Page Builder) ───────
    var ALLOWED = { B:1, STRONG:1, I:1, EM:1, U:1, S:1, STRIKE:1, A:1, BR:1, P:1,
                    UL:1, OL:1, LI:1, H2:1, H3:1, H4:1, BLOCKQUOTE:1 };
    var REMOVE = { SCRIPT:1, STYLE:1, IFRAME:1, OBJECT:1, EMBED:1, FORM:1,
                   INPUT:1, BUTTON:1, SELECT:1, TEXTAREA:1, IMG:1, VIDEO:1, AUDIO:1 };
    var OK_CLASSES = { 'pm-ta-left':1, 'pm-ta-center':1, 'pm-ta-right':1, 'pm-ta-justify':1,
                       'ap-btn':1, 'ap-btn--primary':1, 'ap-btn--outline':1 };

    function sanitize(html) {
        var tmp = document.createElement('div');
        tmp.innerHTML = html;
        var els = tmp.querySelectorAll('*');
        for (var i = els.length - 1; i >= 0; i--) {
            var el = els[i];
            if (REMOVE[el.tagName]) {
                el.parentNode.removeChild(el);
            } else if (!ALLOWED[el.tagName]) {
                while (el.firstChild) el.parentNode.insertBefore(el.firstChild, el);
                el.parentNode.removeChild(el);
            } else {
                var href = el.tagName === 'A' ? el.getAttribute('href') : null;
                var classes = (el.getAttribute('class') || '').split(/\s+/)
                    .filter(function (c) { return OK_CLASSES[c]; });
                while (el.attributes.length > 0) el.removeAttribute(el.attributes[0].name);
                if (href && !/^\s*javascript:/i.test(href)) el.setAttribute('href', href);
                if (classes.length) el.setAttribute('class', classes.join(' '));
            }
        }
        return tmp.innerHTML;
    }

    editor.addEventListener('paste', function (e) {
        e.preventDefault();
        var html = e.clipboardData.getData('text/html');
        var text = e.clipboardData.getData('text/plain');
        if (html) {
            document.execCommand('insertHTML', false, sanitize(html));
            lockButtons();
        } else if (text) {
            document.execCommand('insertText', false, text);
        }
    });

    // ── Submit ─────────────────────────────────────────────────────────
    form.addEventListener('submit', function () {
        field.value = sanitize(editor.innerHTML);
    });

    // ── Delete confirmation (edit mode only) ───────────────────────────
    var deleteForm = document.getElementById('pmDeleteForm');
    if (deleteForm) {
        var CONFIRM_DELETE = {{ t('popup_manager.confirm_delete_version')|tojson }};
        deleteForm.addEventListener('submit', function (e) {
            if (!window.confirm(CONFIRM_DELETE)) e.preventDefault();
        });
    }
})();

function pmToggleTargets() {
    var box = document.getElementById('pm-targets');
    var custom = document.querySelector('input[name="target_type"][value="custom"]');
    if (box) box.hidden = !(custom && custom.checked);
}

function pmFilterTargets(query) {
    query = (query || '').toLowerCase();
    document.querySelectorAll('#pm-targets [data-pm-target-label]').forEach(function (el) {
        el.style.display = el.getAttribute('data-pm-target-label').indexOf(query) === -1 && query
            ? 'none' : '';
    });
}
</script>
{% endblock %}