@extends('layouts.editor', ['pageTitle' => 'Editor · '.$page->displayTitle()])

@push('scripts')
<script>
    window.promptLandingPageEditor = @json($config);
</script>
<script src="{{ asset('assets/js/prompt-landing-page-editor.js') }}?v={{ filemtime(public_path('assets/js/prompt-landing-page-editor.js')) }}"></script>
@endpush

@section('content')
<div class="lp-editor" id="lpEditor">
    <header class="lp-editor-top">
        <div class="lp-editor-top-left">
            <a class="lp-editor-back" href="{{ route('prompt-landing-pages.show', $page) }}"><i class="bi bi-arrow-left"></i> Back</a>
            <strong class="lp-editor-title">{{ $page->displayTitle() }}</strong>
            <span class="lp-editor-open-version" id="editorOpenVersion" hidden></span>
            <span class="lp-editor-status" id="editorStatus" data-state="saved">Saved</span>
        </div>
        <div class="lp-editor-top-center" role="tablist">
            <button type="button" class="is-active" data-mode="visual" aria-selected="true">Visual</button>
            <button type="button" data-mode="html">HTML</button>
            <button type="button" data-mode="css">CSS</button>
            <button type="button" data-mode="js">JavaScript</button>
        </div>
        <div class="lp-editor-top-right">
            <div class="lp-editor-devices" role="group" aria-label="Canvas size">
                <button type="button" class="is-active" data-device="desktop" title="Desktop"><i class="bi bi-laptop"></i></button>
                <button type="button" data-device="tablet" title="Tablet"><i class="bi bi-tablet"></i></button>
                <button type="button" data-device="mobile" title="Mobile"><i class="bi bi-phone"></i></button>
            </div>
            <button type="button" id="editorUndo" title="Undo"><i class="bi bi-arrow-counterclockwise"></i></button>
            <button type="button" id="editorRedo" title="Redo"><i class="bi bi-arrow-clockwise"></i></button>
            <button type="button" id="editorPreview">Preview</button>
            <button type="button" id="editorVersions">Versions</button>
            <button type="button" id="editorSaveDraft">Save draft</button>
            <button type="button" class="is-primary" id="editorSave">Publish</button>
        </div>
    </header>

    <aside class="lp-editor-left" id="editorSidebar">
        <div class="lp-editor-pane">
            <div class="lp-editor-pane-title">Elements</div>
            <p class="lp-editor-pane-hint">Add a piece to the current page</p>
            <div id="editorElements" class="lp-editor-blocks"></div>
        </div>
        <div class="lp-editor-pane">
            <div class="lp-editor-pane-title">Add section</div>
            <p class="lp-editor-pane-hint">Full-width blocks that match a landing page</p>
            <div id="editorSections" class="lp-editor-blocks"></div>
        </div>
    </aside>

    <div class="lp-editor-canvas-wrap">
        <div id="gjs"></div>
        <textarea id="editorHtmlSource" class="lp-editor-source" hidden spellcheck="false"></textarea>
        <textarea id="editorCssSource" class="lp-editor-source" hidden spellcheck="false"></textarea>
        <textarea id="editorJsSource" class="lp-editor-source" hidden spellcheck="false"></textarea>
    </div>

    <aside class="lp-editor-right">
        <div class="lp-editor-pane">
            <div class="lp-editor-pane-title">Selected</div>
            <div id="editorSelection" class="lp-editor-selection">Nothing selected</div>
            <div id="editorSectionActions" class="lp-editor-section-actions" hidden>
                <button type="button" data-section-action="up">Move up</button>
                <button type="button" data-section-action="down">Move down</button>
                <button type="button" data-section-action="duplicate">Duplicate</button>
                <button type="button" data-section-action="toggle">Hide/Show</button>
                <button type="button" data-section-action="delete" class="is-danger">Delete</button>
            </div>
        </div>
        <div class="lp-editor-pane">
            <div class="lp-editor-pane-title">Classes</div>
            <p class="lp-editor-pane-hint">Page classes stay on the element when you edit</p>
            <input id="editorClassList" class="lp-editor-class-input" type="text" placeholder="hero section" spellcheck="false" autocomplete="off">
            <div id="editorClasses"></div>
        </div>
        <div class="lp-editor-pane">
            <div class="lp-editor-pane-title">Properties</div>
            <div id="editorTraits"></div>
        </div>
        <div class="lp-editor-pane">
            <div class="lp-editor-pane-title">Style</div>
            <p class="lp-editor-pane-hint">Changes apply to this element only</p>
            <div id="editorStyles"></div>
        </div>
        <div class="lp-editor-pane">
            <div class="lp-editor-pane-title">Layers</div>
            <div id="editorLayers"></div>
        </div>
    </aside>
</div>

<div class="lp-editor-overlay" id="previewOverlay" hidden>
    <div class="lp-editor-overlay-bar">
        <strong id="previewTitle">Preview</strong>
        <div class="lp-editor-devices">
            <button type="button" class="is-active" data-preview-device="desktop">Desktop</button>
            <button type="button" data-preview-device="tablet">Tablet</button>
            <button type="button" data-preview-device="mobile">Mobile</button>
        </div>
        <button type="button" id="previewClose">Close</button>
    </div>
    <iframe id="previewFrame" title="Landing page preview" sandbox="allow-scripts allow-same-origin allow-popups allow-forms"></iframe>
</div>

<div class="lp-editor-loader" id="editorLoader">
    <div class="lp-editor-loader-card" role="status" aria-live="polite">
        <span class="lp-editor-loader-spinner" aria-hidden="true"></span>
        <span id="editorLoaderLabel">Loading page…</span>
    </div>
</div>

<div class="lp-editor-drawer" id="versionsDrawer" hidden>
    <div class="lp-editor-drawer-head">
        <strong>Version history</strong>
        <button type="button" id="versionsClose">Close</button>
    </div>
        <p class="lp-editor-drawer-hint">Preview a snapshot without changing the live page. Open in Editor loads it into the editor. Make live publishes that snapshot without creating a new version. Delete removes any version except the live page and the original generated page.</p>
    <div class="lp-editor-drawer-body" id="versionsList"></div>
</div>
@endsection