<?php
/**
    * @file form_editor.php
    * @brief Интерфейс визуального редактора форм: панель кнопок, область редактирования, свойства элементов, действия (копировать, вставить, удалить) и выбор изображений
*/
?>

<?php /** @brief Основной контейнер визуального редактора форм */ $formEditor; ?>
<div id="formEditor" class="bfloat">
    <div class="btitle">{{form_editor}}</div>
    <div id="formEditorContent">
        <div id="formMainPanel">
            <button id="menuToggle">☰</button>
            <div id="menuPanel">
                <button id="downloadBtn">{{download_html}}</button>
                <button id="loadBtn">{{load_html}}</button>
                <button id="downloadCssBtn">{{download_html_and_auto_css}}</button>
                Сетка (px): <input id="gridInput" type="number" value="20" min="1">
            </div>
        </div>
        <div class="formEditorPanel" id="panelButtons">
            <div id="formEditorButtons">
                <div class="fe-btn" id="addDiv">D</div>
                <div class="fe-btn" id="addText">T</div>
                <div class="fe-btn" id="addInput">I</div>
                <div class="fe-btn" id="addButton">B</div>
                <div class="fe-btn" id="addImg">Im</div>
            </div>
        </div>
        <div class="formEditorArea"></div>
        <div class="formEditorAreaStyle" style="display: none;"></div>
        <div class="formEditorPanel" id="panelProperties" style="display: none;">
            <div class="panelHeader">{{properties_and_actions}}</div>
            <div class="formEditorProperties">
            </div>
        </div>
    </div>
</div>
<div id="formEditorStyles" style="display: none;"><style></style></div>

<?php /** @brief Контейнер выбора изображения */ $image_chooser; ?>
<div class="image-chooser" style="display: none;">
    <button id="imgByUrl">{{img_by_url}}</button>
    <button id="imgUpload">{{img_upload_to_server}}</button>
    <button id="imgData">{{img_insert_as_data_url}}</button>
</div>

<?php /** @brief Панель действий с элементами формы (копировать, вставить, удалить) */ $formEditorActions; ?>
<div id="formEditorActions">
    <div class="formEditorActionPanel">
        <div class="formEditorAction" id="copyAction">{{copy}}</div>
        <div class="formEditorAction" id="pasteAction">{{paste}}</div>
        <div class="formEditorAction" id="deleteAction">{{delete}}</div>
    </div>
</div>