@extends('admin.layouts.app')

@section('title', 'Page builder · '.$editor['title'])
@section('page_title', 'Page builder')

@section('content')
@php
    $pbConfig = [
    'addons' => $addons,
    'categories' => $categories,
    'backgrounds' => $backgrounds,
    'spacings' => $spacings,
    'presets' => $presets,
    'sections' => $sections,
    'isActive' => $isActive,
    'slugLocked' => $editor['slug_locked'],
    'publicUrl' => $editor['public_url'],
    'csrf' => csrf_token(),
    'page' => $editor['page'],
    'urls' => [
        'save' => $editor['urls']['save'],
        'preview' => $editor['urls']['preview'],
        'preset' => $editor['urls']['preset'],
        'media' => route('admin.media.index', ['format' => 'json']),
        'upload' => route('admin.media.upload'),
        'mediaUpdate' => url('/admin/media/__ID__'),
    ],
    ];
@endphp
<script type="application/json" id="pb-config">{!! json_encode($pbConfig, JSON_HEX_TAG | JSON_HEX_AMP | JSON_UNESCAPED_SLASHES) !!}</script>

<div class="home-editor pb" x-data="pageBuilder(JSON.parse(document.getElementById('pb-config').textContent))" @dragend.window="endDrag()">
    {{-- Header --}}
    <header class="pb-header">
        <div class="pb-header__main">
            <a href="{{ $editor['back_url'] }}" class="pb-header__back" title="{{ $editor['back_label'] }}" aria-label="{{ $editor['back_label'] }}">
                <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 0 1-.02 1.06L8.83 10l3.94 3.71a.75.75 0 1 1-1.04 1.08l-4.5-4.25a.75.75 0 0 1 0-1.08l4.5-4.25a.75.75 0 0 1 1.06.02Z" clip-rule="evenodd"/></svg>
            </a>
            <div class="min-w-0">
                <p class="pb-header__eyebrow">{{ $editor['eyebrow'] }}</p>
                <h1 class="pb-header__title">Edit · <span x-text="page.title || 'Untitled'">{{ $editor['title'] }}</span></h1>
                <p class="pb-header__url">{{ str_replace(['https://', 'http://'], '', $editor['public_url']) }}</p>
            </div>
        </div>
        <div class="pb-header__actions">
            <div class="pb-history">
                <button type="button" @click="undo()" :disabled="!history.length" title="Undo (Ctrl+Z)" aria-label="Undo">
                    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M7.5 5 4 8.5 7.5 12M4.5 8.5H12a4 4 0 0 1 0 8h-2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>
                <button type="button" @click="redo()" :disabled="!future.length" title="Redo (Ctrl+Shift+Z)" aria-label="Redo">
                    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12.5 5 16 8.5 12.5 12M15.5 8.5H8a4 4 0 0 0 0 8h2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </button>
            </div>
            <span class="pb-save-state" :class="{ 'is-dirty': dirty, 'is-saving': saving }">
                <span class="pb-save-state__dot"></span>
                <span x-text="saveState"></span>
            </span>
            <button type="button" class="home-btn home-btn--light" @click="openPreview()">
                <svg viewBox="0 0 20 20" fill="currentColor"><path d="M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/><path fill-rule="evenodd" d="M.66 10.59a1.65 1.65 0 0 1 0-1.18A10 10 0 0 1 10 3c4.26 0 7.9 2.66 9.34 6.41.15.38.15.8 0 1.18A10 10 0 0 1 10 17c-4.26 0-7.9-2.66-9.34-6.41ZM14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" clip-rule="evenodd"/></svg>
                Preview
            </button>
            <a :href="publicUrl" target="_blank" rel="noopener" class="home-btn home-btn--light" x-show="page.status === 'published'">
                View live
                <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 0 0 1.06 0l7.22-7.22v5.69a.75.75 0 0 0 1.5 0v-7.5a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0 0 1.5h5.69l-7.22 7.22a.75.75 0 0 0 0 1.06Z" clip-rule="evenodd"/></svg>
            </a>
            @can('update', $editor['model'])
                <button type="button" class="home-btn pb-save-btn" @click="save()" :disabled="saving">
                    <svg x-show="!saving" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.58l7.3-7.3a1 1 0 0 1 1.4 0Z" clip-rule="evenodd"/></svg>
                    <svg x-show="saving" x-cloak class="pb-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 3a9 9 0 1 0 9 9" stroke-linecap="round"/></svg>
                    <span x-text="saving ? 'Saving…' : 'Save page'">Save page</span>
                </button>
            @endcan
        </div>
    </header>

    {{-- Tabs --}}
    <nav class="pb-tabs" role="tablist">
        <span class="home-editor__tab is-active" role="tab" aria-selected="true"><span class="home-editor__tab-dot"></span>{{ $editor['content_label'] }}</span>
        @foreach ($editor['tabs'] as $tabLink)
            <a href="{{ $tabLink['url'] }}" class="home-editor__tab" role="tab">
                <span class="home-editor__tab-dot"></span>{{ $tabLink['label'] }}
                @if (! is_null($tabLink['score'] ?? null))
                    <span class="pb-tab-score {{ $tabLink['score'] >= 80 ? 'is-good' : ($tabLink['score'] >= 60 ? 'is-mid' : 'is-low') }}">{{ $tabLink['score'] }}</span>
                @endif
            </a>
        @endforeach
        <div class="pb-tabs__aside">
            <span class="pb-status" :class="`is-${page.status}`" x-text="statusLabel"></span>
            <template x-if="!isActive">
                <span class="pb-chip" title="Visitors currently see the default template. Saving publishes this builder layout.">{{ $editor['live_note'] }}</span>
            </template>
        </div>
    </nav>

    <div class="pb-workspace">
        {{-- Addon library --}}
        <aside class="pb-library">
            <div class="pb-library__head">
                <p class="pb-library__label">Page builder</p>
                <div class="pb-search">
                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.45 4.39l3.33 3.33a.75.75 0 1 1-1.06 1.06l-3.33-3.33A7 7 0 0 1 2 9Z" clip-rule="evenodd"/></svg>
                    <input type="search" x-ref="addonSearch" x-model="search" placeholder="Search addons…" @focus="panel = 'addons'">
                </div>
                <div class="pb-segment">
                    <button type="button" :class="panel === 'addons' && 'is-active'" @click="panel = 'addons'">Addons</button>
                    <button type="button" :class="panel === 'outline' && 'is-active'" @click="panel = 'outline'">On this page (<span x-text="sections.length"></span>)</button>
                </div>
            </div>

            <div class="pb-library__body" x-show="panel === 'addons'">
                <template x-for="category in visibleCategories" :key="category">
                    <div class="pb-library__group">
                        <p class="pb-library__group-label" x-text="categories[category]"></p>
                        <template x-for="addon in addonsIn(category)" :key="addon.type">
                            <div class="pb-addon" draggable="true" @dragstart="startAddonDrag($event, addon.type)" @click="addSection(addon.type)" role="button" tabindex="0" @keydown.enter="addSection(addon.type)">
                                <span class="pb-addon__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path :d="addon.icon"/></svg></span>
                                <span class="pb-addon__text">
                                    <span class="pb-addon__name">
                                        <span x-text="addon.label"></span>
                                        <span class="pb-addon__used" x-show="usageCount(addon.type)" x-text="`×${usageCount(addon.type)}`"></span>
                                    </span>
                                    <span class="pb-addon__desc" x-text="addon.description"></span>
                                </span>
                                <span class="pb-addon__plus" aria-hidden="true">+</span>
                            </div>
                        </template>
                    </div>
                </template>
                <p class="pb-library__empty" x-show="!visibleCategories.length">No addons match “<span x-text="search"></span>”.</p>
            </div>

            <div class="pb-library__body" x-show="panel === 'outline'" x-cloak @dragover="overList($event)" @drop="drop($event)">
                <template x-for="(section, index) in sections" :key="section.uid + ':' + rev">
                    <div class="pb-outline"
                         :class="{ 'is-focused': focusedUid === section.uid, 'is-hidden': !section.visible, 'is-drop-before': drag && dropIndex === index, 'is-drop-after': drag && dropIndex === index + 1 && index === sections.length - 1 }"
                         draggable="true"
                         @dragstart="startSectionDrag($event, index)"
                         @dragover="overCard($event, index)"
                         @click="focusSection(section.uid)">
                        <span class="pb-outline__grip" aria-hidden="true">⋮⋮</span>
                        <span class="pb-outline__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path :d="addon(section.type)?.icon"/></svg></span>
                        <span class="pb-outline__text">
                            <span class="pb-outline__name" x-text="addon(section.type)?.label"></span>
                            <span class="pb-outline__sum" x-text="summary(section)"></span>
                        </span>
                        <span class="pb-outline__eye" x-show="!section.visible" title="Hidden">◌</span>
                    </div>
                </template>
                <p class="pb-library__empty" x-show="!sections.length">No sections yet — add one from Addons.</p>
            </div>

            <p class="pb-library__hint">Click an addon to insert · drag addons or <em>On this page</em> items to reorder</p>
        </aside>

        {{-- Canvas --}}
        <section class="pb-canvas">
            {{-- Page settings --}}
            <div class="pb-settings" :class="settingsOpen && 'is-open'">
                <button type="button" class="pb-settings__head" @click="settingsOpen = !settingsOpen">
                    <span class="pb-settings__icon">
                        <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.84 1.8A1 1 0 0 1 8.82 1h2.36a1 1 0 0 1 .98.8l.3 1.48c.47.2.91.45 1.32.75l1.43-.48a1 1 0 0 1 1.18.45l1.18 2.04a1 1 0 0 1-.2 1.25l-1.13 1c.06.5.06 1.01 0 1.51l1.13 1a1 1 0 0 1 .2 1.25l-1.18 2.04a1 1 0 0 1-1.18.45l-1.43-.48c-.41.3-.85.55-1.32.75l-.3 1.48a1 1 0 0 1-.98.8H8.82a1 1 0 0 1-.98-.8l-.3-1.48a6.97 6.97 0 0 1-1.32-.75l-1.43.48a1 1 0 0 1-1.18-.45L2.43 13.5a1 1 0 0 1 .2-1.25l1.13-1a7.03 7.03 0 0 1 0-1.51l-1.13-1a1 1 0 0 1-.2-1.25L3.6 5.45a1 1 0 0 1 1.18-.45l1.43.48c.41-.3.85-.55 1.32-.75l.3-1.48ZM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" clip-rule="evenodd"/></svg>
                    </span>
                    <span class="pb-settings__title">
                        Page settings
                        <span class="pb-settings__sub">{{ $editor['settings_hint'] }}</span>
                    </span>
                    <svg class="pb-settings__chevron" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd"/></svg>
                </button>
                <div class="pb-settings__body" x-show="settingsOpen" x-cloak>
                    <div class="pb-fields">
                        <div class="pb-field pb-field--half">
                            <label class="pb-label">{{ $editor['title_label'] }}</label>
                            <input type="text" class="home-input" x-model="page.title" required maxlength="255">
                        </div>
                        <div class="pb-field pb-field--half">
                            <label class="pb-label">URL slug</label>
                            <div class="pb-slug">
                                <span>{{ $editor['slug_prefix'] }}</span>
                                <input type="text" class="home-input" x-model="page.slug" :disabled="slugLocked" @input="page.slug = page.slug.toLowerCase().replace(/[^a-z0-9-]+/g, '-').replace(/-{2,}/g, '-')">
                            </div>
                            <p class="pb-help" x-show="slugLocked">{{ $editor['slug_help'] }}</p>
                        </div>
                        <div class="pb-field pb-field--full">
                            <label class="pb-label">{{ $editor['excerpt_label'] }}</label>
                            <textarea rows="2" class="home-textarea" x-model="page.excerpt" maxlength="1000" placeholder="Short description used in listings and as the default meta description"></textarea>
                        </div>
                        <div class="pb-field pb-field--half">
                            <label class="pb-label">Status</label>
                            <select class="home-select" x-model="page.status">
                                @foreach ($editor['statuses'] as $statusValue => $statusLabel)
                                    <option value="{{ $statusValue }}">{{ $statusLabel }}</option>
                                @endforeach
                            </select>
                        </div>
                        @if ($isActive)
                            <div class="pb-field pb-field--half pb-settings__danger">
                                <label class="pb-label">Layout engine</label>
                                <form method="POST" action="{{ $editor['urls']['destroy'] }}" onsubmit="return confirm('Remove the builder layout and switch back to the default template?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="home-btn home-btn--ghost home-btn--sm">Revert to default template</button>
                                </form>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Sections toolbar --}}
            <div class="pb-canvas__bar">
                <div>
                    <h2 class="pb-canvas__title">Page sections</h2>
                    <p class="pb-canvas__sub"><span x-text="sections.length"></span> sections · <span x-text="sections.filter(s => s.visible).length"></span> visible</p>
                </div>
                <div class="pb-canvas__tools">
                    <button type="button" class="home-btn home-btn--ghost home-btn--sm" @click="setAllExpanded(!allExpanded)" x-text="allExpanded ? 'Collapse all' : 'Expand all'"></button>
                    <div class="pb-menu" @click.outside="presetMenu = false">
                        <button type="button" class="home-btn home-btn--ghost home-btn--sm" @click="presetMenu = !presetMenu">
                            Layouts
                            <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd"/></svg>
                        </button>
                        <div class="pb-menu__panel" x-show="presetMenu" x-cloak x-transition.origin.top.right>
                            <p class="pb-menu__label">Replace with a layout</p>
                            <template x-for="(label, key) in presets" :key="key">
                                <button type="button" class="pb-menu__item" @click="applyPreset(key)">
                                    <span x-text="label"></span>
                                    <small x-text="key === 'original' ? 'Rebuild from the default template' : (key === 'blank' ? 'Start from an empty page' : 'Starter sections you can customise')"></small>
                                </button>
                            </template>
                        </div>
                    </div>
                    <button type="button" class="home-btn home-btn--primary home-btn--sm" @click="panel = 'addons'; $refs.addonSearch.focus()">
                        <svg viewBox="0 0 20 20" fill="currentColor"><path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"/></svg>
                        Add section
                    </button>
                </div>
            </div>

            {{-- Section cards --}}
            <div class="pb-list" @dragover="overList($event)" @drop="drop($event)">
                <template x-for="(section, index) in sections" :key="section.uid + ':' + rev">
                    <article class="pb-card"
                             :id="`pb-card-${section.uid}`"
                             :class="{
                                 'is-open': expanded[section.uid],
                                 'is-hidden': !section.visible,
                                 'is-focused': focusedUid === section.uid,
                                 'is-dragging': drag && drag.kind === 'section' && drag.index === index,
                                 'is-drop-before': drag && dropIndex === index,
                                 'is-drop-after': drag && dropIndex === index + 1 && index === sections.length - 1,
                             }"
                             :draggable="armedUid === section.uid"
                             @dragstart="startSectionDrag($event, index)"
                             @dragover="overCard($event, index)">
                        <header class="pb-card__head" @click="toggleExpand(section.uid)">
                            <span class="pb-card__grip" title="Drag to reorder" @mousedown="armedUid = section.uid" @mouseup="armedUid = null" @click.stop>
                                <svg viewBox="0 0 20 20" fill="currentColor"><path d="M7 4.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm0 5.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm-1.25 6.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5ZM15.5 4.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm-1.25 6.75a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Zm1.25 4.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z"/></svg>
                            </span>
                            <span class="pb-card__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path :d="addon(section.type)?.icon"/></svg></span>
                            <span class="pb-card__text">
                                <span class="pb-card__title">
                                    <span x-text="addon(section.type)?.label"></span>
                                    <span class="pb-card__badge" x-show="countLabel(section)" x-text="countLabel(section)"></span>
                                </span>
                                <span class="pb-card__desc" x-text="summary(section)"></span>
                            </span>
                            <span class="pb-card__tools" @click.stop>
                                <button type="button" title="Move up" :disabled="index === 0" @click="move(index, index - 1)">
                                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M14.77 12.79a.75.75 0 0 1-1.06-.02L10 8.83l-3.71 3.94a.75.75 0 1 1-1.08-1.04l4.25-4.5a.75.75 0 0 1 1.08 0l4.25 4.5a.75.75 0 0 1-.02 1.06Z" clip-rule="evenodd"/></svg>
                                </button>
                                <button type="button" title="Move down" :disabled="index === sections.length - 1" @click="move(index, index + 1)">
                                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd"/></svg>
                                </button>
                                <button type="button" title="Duplicate" @click="duplicate(index)">
                                    <svg viewBox="0 0 20 20" fill="currentColor"><path d="M7 3.5A1.5 1.5 0 0 1 8.5 2h3.88a1.5 1.5 0 0 1 1.06.44l3.12 3.12A1.5 1.5 0 0 1 17 6.62V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.38a3 3 0 0 0-.88-2.12L10.5 5.38A3 3 0 0 0 8.38 4.5H7v-1Z"/><path d="M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.88a1.5 1.5 0 0 0-.44-1.06L9.44 6.44A1.5 1.5 0 0 0 8.38 6H4.5Z"/></svg>
                                </button>
                                <button type="button" title="Delete section" class="is-danger" @click="remove(index)">
                                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.44c-.8.08-1.58.17-2.37.29a.75.75 0 1 0 .23 1.48l.15-.02.84 10.52A2.75 2.75 0 0 0 7.59 19h4.82a2.75 2.75 0 0 0 2.74-2.54l.84-10.52.15.02a.75.75 0 0 0 .23-1.48A41 41 0 0 0 14 4.19v-.44A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.67.03 2.5.08v-.33c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.33C8.33 4.03 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd"/></svg>
                                </button>
                                <label class="pb-visible" :title="section.visible ? 'Visible on the live page' : 'Hidden from visitors'">
                                    <input type="checkbox" x-model="section.visible">
                                    <span class="pb-visible__track" aria-hidden="true"></span>
                                    <span class="pb-visible__label" x-text="section.visible ? 'Visible' : 'Hidden'"></span>
                                </label>
                            </span>
                            <svg class="pb-card__chevron" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z" clip-rule="evenodd"/></svg>
                        </header>

                        <template x-if="expanded[section.uid]">
                            <div class="pb-card__body">
                                <div class="pb-card__tabs">
                                    <button type="button" :class="(cardTab[section.uid] || 'content') === 'content' && 'is-active'" @click="cardTab[section.uid] = 'content'">Content</button>
                                    <button type="button" :class="cardTab[section.uid] === 'design' && 'is-active'" @click="cardTab[section.uid] = 'design'">Design &amp; visibility</button>
                                    <span class="pb-card__type" x-text="addon(section.type)?.description"></span>
                                </div>

                                <div class="pb-fields" x-show="(cardTab[section.uid] || 'content') === 'content'">
                                    <template x-for="field in addon(section.type).fields" :key="field.key">
                                        @include('admin.pages.builder-partials.field', ['obj' => 'section.data', 'f' => 'field', 'nested' => false])
                                    </template>
                                </div>

                                <div class="pb-fields" x-show="cardTab[section.uid] === 'design'" x-cloak>
                                    <template x-if="addon(section.type).design">
                                        <div class="pb-field pb-field--half">
                                            <label class="pb-label">Background</label>
                                            <div class="pb-swatches">
                                                <button type="button" class="pb-swatch pb-swatch--auto" :class="section.settings.background === 'auto' && 'is-active'" @click="section.settings.background = 'auto'" title="Default">A</button>
                                                <template x-for="(label, key) in backgrounds" :key="key">
                                                    <button type="button" class="pb-swatch" :class="[`pb-swatch--${key}`, section.settings.background === key && 'is-active']" @click="section.settings.background = key" :title="label"></button>
                                                </template>
                                            </div>
                                        </div>
                                    </template>
                                    <template x-if="addon(section.type).design">
                                        <div class="pb-field pb-field--half">
                                            <label class="pb-label">Vertical spacing</label>
                                            <select class="home-select" x-model="section.settings.spacing">
                                                <template x-for="(label, key) in spacings" :key="key">
                                                    <option :value="key" x-text="label" :selected="section.settings.spacing === key"></option>
                                                </template>
                                            </select>
                                        </div>
                                    </template>
                                    <template x-if="!addon(section.type).design">
                                        <p class="pb-note pb-field--full">This addon uses its own signature styling, so background and spacing are fixed.</p>
                                    </template>
                                    <div class="pb-field pb-field--half">
                                        <label class="pb-label">Anchor ID</label>
                                        <div class="pb-slug">
                                            <span>#</span>
                                            <input type="text" class="home-input" x-model="section.settings.anchor" placeholder="e.g. pricing">
                                        </div>
                                        <p class="pb-help">Link to this section with /page#anchor.</p>
                                    </div>
                                    <div class="pb-field pb-field--half pb-field--stack">
                                        <label class="pb-switch"><input type="checkbox" x-model="section.settings.hide_mobile"><span class="pb-switch__track"></span><span class="pb-switch__label">Hide on mobile</span></label>
                                        <label class="pb-switch"><input type="checkbox" x-model="section.settings.hide_desktop"><span class="pb-switch__track"></span><span class="pb-switch__label">Hide on desktop</span></label>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </article>
                </template>

                <div class="pb-empty" x-show="!sections.length" :class="drag && 'is-drop'">
                    <span class="pb-empty__icon">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 5h16v5H4zM4 14h7v5H4zM15 14h5v5h-5z" stroke-linejoin="round"/></svg>
                    </span>
                    <p class="pb-empty__title">Start building this page</p>
                    <p class="pb-empty__text">Click an addon on the left, drag one here, or start from a ready-made layout.</p>
                    <div class="pb-empty__actions">
                        <button type="button" class="home-btn home-btn--ghost home-btn--sm" @click="applyPreset('standard')">Standard page</button>
                        <button type="button" class="home-btn home-btn--ghost home-btn--sm" @click="applyPreset('landing')">Landing page</button>
                        <button type="button" class="home-btn home-btn--ghost home-btn--sm" @click="applyPreset('legal')">Legal page</button>
                    </div>
                </div>

                <button type="button" class="pb-add-end" x-show="sections.length" @click="panel = 'addons'; $refs.addonSearch.focus()">
                    <span>+</span> Add section
                </button>
            </div>
        </section>
    </div>

    {{-- Live preview drawer --}}
    <div class="pb-preview" x-show="preview.open" x-cloak x-transition.opacity @keydown.escape.window="preview.open && (preview.open = false)">
        <div class="pb-preview__bar">
            <div class="pb-preview__title">
                <span class="pb-preview__dot" :class="preview.loading && 'is-loading'"></span>
                Live preview
                <span class="pb-preview__hint">Updates as you edit · click a section to edit it</span>
            </div>
            <div class="pb-devices">
                <button type="button" :class="preview.device === 'desktop' && 'is-active'" @click="preview.device = 'desktop'" title="Desktop">
                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M2 4.25A2.25 2.25 0 0 1 4.25 2h11.5A2.25 2.25 0 0 1 18 4.25v8.5A2.25 2.25 0 0 1 15.75 15h-3.11l.53 1.5h1.08a.75.75 0 0 1 0 1.5H5.75a.75.75 0 0 1 0-1.5h1.08l.53-1.5H4.25A2.25 2.25 0 0 1 2 12.75v-8.5Z" clip-rule="evenodd"/></svg>
                </button>
                <button type="button" :class="preview.device === 'tablet' && 'is-active'" @click="preview.device = 'tablet'" title="Tablet">
                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5 1a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H5Zm3 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>
                </button>
                <button type="button" :class="preview.device === 'mobile' && 'is-active'" @click="preview.device = 'mobile'" title="Mobile">
                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M6.5 1A1.5 1.5 0 0 0 5 2.5v15A1.5 1.5 0 0 0 6.5 19h7a1.5 1.5 0 0 0 1.5-1.5v-15A1.5 1.5 0 0 0 13.5 1h-7ZM9 16.25a.75.75 0 0 1 .75-.75h.5a.75.75 0 0 1 0 1.5h-.5a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd"/></svg>
                </button>
            </div>
            <div class="pb-preview__actions">
                <button type="button" class="home-btn home-btn--ghost home-btn--sm" @click="refreshPreview()">Refresh</button>
                <button type="button" class="home-btn home-btn--primary home-btn--sm" @click="save()" :disabled="saving" x-text="saving ? 'Saving…' : 'Save page'"></button>
                <button type="button" class="pb-preview__close" @click="preview.open = false" aria-label="Close preview">✕</button>
            </div>
        </div>
        <div class="pb-preview__stage">
            <div class="pb-preview__device" :class="`is-${preview.device}`" :style="`width: ${deviceWidth}`">
                <iframe x-ref="previewFrame" title="Page preview" class="pb-preview__frame"></iframe>
            </div>
        </div>
    </div>

    {{-- Media library --}}
    <div class="media-modal" x-show="media.open" x-cloak x-transition.opacity @keydown.escape.window="media.open && closeMedia()">
        <div class="media-modal__backdrop" @click="closeMedia()"></div>
        <div class="media-modal__panel" role="dialog" aria-modal="true" aria-label="Media library" @click.stop>
            <header class="media-modal__header">
                <div>
                    <p class="media-modal__eyebrow">Media library</p>
                    <h3 class="media-modal__title" x-text="mediaTitle"></h3>
                </div>
                <button type="button" class="media-modal__close" @click="closeMedia()" aria-label="Close">
                    <svg viewBox="0 0 20 20" fill="currentColor"><path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z"/></svg>
                </button>
            </header>

            <div class="media-modal__toolbar">
                <label class="home-btn home-btn--primary home-btn--sm cursor-pointer">
                    <svg viewBox="0 0 20 20" fill="currentColor"><path d="M9.25 13.25a.75.75 0 0 0 1.5 0V7.56l1.97 1.97a.75.75 0 1 0 1.06-1.06l-3.25-3.25a.75.75 0 0 0-1.06 0L6.22 8.47a.75.75 0 0 0 1.06 1.06l1.97-1.97v5.69Z"/><path d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25v-2.5Z"/></svg>
                    Upload from PC
                    <input type="file" multiple class="hidden" :accept="mediaAccept" @change="uploadMedia($event.target.files); $event.target.value = ''">
                </label>
                <div class="media-modal__search">
                    <svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.45 4.39l3.33 3.33a.75.75 0 1 1-1.06 1.06l-3.33-3.33A7 7 0 0 1 2 9Z" clip-rule="evenodd"/></svg>
                    <input type="search" x-model="media.search" @input.debounce.300ms="loadMedia()" placeholder="Search library…">
                </div>
                <span class="media-modal__status" x-show="media.uploading" x-cloak>Uploading…</span>
            </div>

            <div class="media-modal__body">
                <div class="media-modal__grid-wrap">
                    <div class="media-modal__grid">
                        <template x-for="item in media.items" :key="item.id">
                            <button type="button" class="media-modal__tile" :class="{ 'is-active': media.draft?.id === item.id }" @click="focusMedia(item)" @dblclick="useMedia(item)">
                                <template x-if="isImage(item)">
                                    <img :src="item.url" :alt="item.alt_text || item.name" loading="lazy">
                                </template>
                                <template x-if="!isImage(item)">
                                    <div class="media-modal__file" x-text="item.type_label || 'FILE'"></div>
                                </template>
                                <span class="media-modal__tile-name" x-text="item.name"></span>
                            </button>
                        </template>
                    </div>
                    <p x-show="!media.items.length && !media.loading" class="media-modal__empty">No files found. Upload from your PC to get started.</p>
                    <p x-show="media.loading" class="media-modal__empty" x-cloak>Loading library…</p>
                </div>

                <template x-if="media.draft">
                <aside class="media-modal__details">
                    <div class="media-modal__details-preview">
                        <template x-if="media.draft && isImage(media.draft)">
                            <img :src="media.draft.url" :alt="media.draft.alt_text || media.draft.name">
                        </template>
                        <template x-if="media.draft && !isImage(media.draft)">
                            <div class="media-modal__file" x-text="media.draft.type_label || 'FILE'"></div>
                        </template>
                    </div>
                    <p class="media-modal__details-title" x-text="media.draft?.name"></p>
                    <p class="pb-help" x-text="[media.draft?.human_size, media.draft?.mime_type].filter(Boolean).join(' · ')"></p>
                    <div class="media-modal__fields">
                        <label><span>Title</span><input type="text" x-model="media.draft.title"></label>
                        <label x-show="isImage(media.draft)"><span>Alt text</span><input type="text" x-model="media.draft.alt_text" placeholder="Describe the image"></label>
                        <label><span>Caption</span><input type="text" x-model="media.draft.caption"></label>
                    </div>
                    <div class="media-modal__details-actions">
                        <button type="button" class="home-btn home-btn--ghost home-btn--sm" @click="saveMediaMeta()" :disabled="media.saving">Save details</button>
                        <button type="button" class="home-btn home-btn--primary home-btn--sm" @click="useMedia()">Use this file</button>
                    </div>
                </aside>
                </template>

                <aside class="media-modal__details media-modal__details--empty" x-show="!media.draft" x-cloak>
                    <p>Select a file to review its details, then insert it into the section. Double-click to insert instantly.</p>
                </aside>
            </div>
        </div>
    </div>

    {{-- Toast --}}
    <div class="pb-toast" x-show="toast" x-cloak x-transition :class="toast?.type === 'error' && 'is-error'">
        <span x-text="toast?.message"></span>
    </div>
</div>
@endsection