{% extends "pages/base.html" %}

{% block title %}{{ layout.name }} — boxframe{% endblock %}

{% block header %}{% endblock %}

{% block main_class %}container container--full{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/css/editor.css">
{% endblock %}

{% block content %}
<div x-data="editorApp()" x-init="init()"
     data-layout-id="{{ layout.id }}" data-project-id="{{ layout.project_id }}"
     class="editor-root">

    <!-- Hidden file input for layout import (opened by the Import button) -->
    <input type="file" x-ref="importFile" class="import-file-input"
           accept=".json,application/json" style="display:none"
           @change="onImportFile($event)">

    <!-- Header: logo + actions, then breadcrumb -->
    <header class="editor-header">
        <div class="editor-header__top">
            <a href="/" class="logo">boxframe</a>
            <div class="editor-header__actions">
                <button class="btn btn-sm import-btn" @click="$refs.importFile.click()"
                        title="Import a layout from a JSON file">Import</button>
                <div class="dropdown" x-data="{ open: false }" @click.outside="open = false">
                    <button class="btn btn-sm" @click="open = !open">Export...</button>
                    <div class="dropdown__menu" x-show="open" x-cloak>
                        <button class="dropdown__item" @click="exportAs('json'); open = false">📋 JSON</button>
                        <button class="dropdown__item" @click="exportAs('markdown'); open = false">📝 Markdown</button>
                        <button class="dropdown__item" @click="exportAs('ascii'); open = false">📄 ASCII</button>
                    </div>
                </div>
                <button class="btn btn-sm undo-btn" @click="undo()" :disabled="undoCount === 0"
                        title="Undo (Ctrl+Z)">↶</button>
                <button class="btn btn-sm redo-btn" @click="redo()" :disabled="redoCount === 0"
                        title="Redo (Ctrl+Shift+Z)">↷</button>
                <button class="btn btn-sm copy-btn" @click="copyRaw()">Copy</button>
                <button class="btn btn-sm clear-layout-btn" x-show="blocks.length > 0" x-cloak
                        @click="clearLayout()" title="Remove all blocks (asks for confirmation)">Clear</button>
            </div>
        </div>
        <nav class="editor-header__breadcrumb">
            <a href="/">projects</a>
            <span class="sep">←</span>
            <a href="/project/{{ layout.project_id }}">{{ project_name }}</a>
            <span class="sep">←</span>
            <span class="current">{{ layout.name }}</span>
        </nav>
    </header>

    <!-- Body: sidebar (components + elements) + content (canvas) -->
    <div class="editor-body">
        <!-- Sidebar -->
        <aside class="editor-sidebar">
            <div class="editor-components">
                <div class="section-title">Components</div>
                <div class="palette-grid">
                    <template x-for="type in blockTypes" :key="type">
                        <button class="palette-btn"
                                @click="addBlock(type)"
                                @dragstart="onPaletteDragStart($event)"
                                @dragend="onPaletteDragEnd($event)"
                                :data-block-type="type"
                                draggable="true"
                                :title="'Drag to canvas or click to add at (1,1)'">
                            <span x-text="type"></span>
                        </button>
                    </template>
                </div>
            </div>

            <div class="editor-elements">
                <div class="section-title" x-text="'Elements (' + blocks.length + ')'"></div>
                <div class="element-list">
                    <template x-for="(block, idx) in blocks" :key="block.id">
                        <div class="block-item"
                             :class="{ 'block-item--selected': block.id === selectedBlockId }"
                             @click="selectBlock(block.id)">
                            <span class="block-item__info">
                                <strong x-text="block.block_type"></strong>
                                <span class="block-item__pos" x-text="' @(' + block.x + ',' + block.y + ')'"></span>
                                <span class="block-order" x-text="'#' + block.order"></span>
                            </span>
                            <span class="block-actions">
                                <select class="style-select" :value="block.border_style"
                                        @change="updateBlockStyle(block.id, $event.target.value)"
                                        title="Border / line style">
                                    <template x-for="s in borderStyles" :key="s">
                                        <option :value="s" x-text="s"></option>
                                    </template>
                                </select>
                                <button class="order-btn" @click="moveBlockOrder(block.id, -1)" :disabled="block.order <= 0" title="Move down (lower z-index)">↓</button>
                                <button class="order-btn" @click="moveBlockOrder(block.id, 1)" :disabled="block.order >= maxOrder" title="Move up (higher z-index)">↑</button>
                                <button class="delete-block" @click="deleteBlock(block.id)" title="Delete">×</button>
                            </span>
                        </div>
                    </template>
                </div>
            </div>
        </aside>

        <!-- Content: canvas preview -->
        <section class="editor-content">
            <div class="canvas-container"
                 title="Click a block to select it, double-click to edit its text"
                 @dragover.prevent="onCanvasDragOver($event)"
                 @dragleave="onCanvasDragLeave($event)"
                 @drop="onCanvasDrop($event)"
                 @mousedown="onCanvasMouseDown($event)"
                 @dblclick="onCanvasDblClick($event)">
                <div class="canvas-drag-overlay"></div>
                <div x-html="htmlPreview"></div>
                <!-- Selection frame (single-click selection) with action icons -->
                <div class="block-selection" x-show="selectedBlock && !editingBlock" x-cloak
                     :style="selectionStyle">
                    <div class="block-selection__frame"></div>
                    <button class="sel-icon sel-icon--dup" @click="duplicateBlock()"
                            title="Duplicate block">⧉</button>
                    <button class="sel-icon sel-icon--del" @click="deleteBlock(selectedBlock.id)"
                            title="Delete block">✕</button>
                    <div class="sel-resize" @mousedown="onSelectionResizeMouseDown($event)"
                         title="Drag to resize"></div>
                </div>
                <!-- Block properties panel (floats next to the selected block) -->
                <div class="block-props" x-show="selectedBlock && !editingBlock" x-cloak
                     :style="propsPanelStyle">
                    <div class="block-props__head">
                        <span class="block-props__type" x-text="selectedBlock.block_type"></span>
                        <button class="block-props__close" @click="selectedBlockId = null"
                                title="Deselect">×</button>
                    </div>
                    <div class="block-props__grid">
                        <label class="prop prop--wide">
                            <span>Style</span>
                            <select :value="selectedBlock.border_style"
                                    @change="updateSelectedBlock({ border_style: $event.target.value })">
                                <template x-for="s in borderStyles" :key="s">
                                    <option :value="s" x-text="s"></option>
                                </template>
                            </select>
                        </label>
                        <label class="prop">
                            <span>X</span>
                            <input type="number" min="0" :value="selectedBlock.x"
                                   @change="updateSelectedXY($event)">
                        </label>
                        <label class="prop">
                            <span>Y</span>
                            <input type="number" min="0" :value="selectedBlock.y"
                                   @change="updateSelectedXY($event)">
                        </label>
                        <label class="prop">
                            <span>W</span>
                            <input type="number" min="1" :value="selectedBlock.width"
                                   @change="updateSelectedWH($event)">
                        </label>
                        <label class="prop">
                            <span>H</span>
                            <input type="number" min="1" :value="selectedBlock.height"
                                   @change="updateSelectedWH($event)">
                        </label>
                        <label class="prop">
                            <span>Order</span>
                            <input type="number" min="0" :value="selectedBlock.order"
                                   @change="updateSelectedOrder($event)">
                        </label>
                        <label class="prop prop--wide">
                            <span>Content</span>
                            <input type="text" :value="selectedBlock.content"
                                   @change="updateSelectedContent($event)">
                        </label>
                    </div>
                </div>
                <!-- Inline content editor (opened by double-click on a block) -->
                <div class="block-edit-overlay" x-show="editingBlock" x-cloak
                     :style="editOverlayStyle">
                    <textarea x-ref="editInput" x-model="editText" spellcheck="false"
                              @keydown="onEditKeydown($event)"
                              @blur="saveBlockContent()"></textarea>
                </div>
            </div>
        </section>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/core/renderer.js"></script>
<script src="/static/js/core/store.js"></script>
<script src="/static/js/core/history.js"></script>
<script src="/static/js/core/import.js"></script>
<script src="/static/js/editor.js"></script>
{% endblock %}