<html
    xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers"
    data-namespace-typo3-fluid="true"
>

<f:layout name="Module" />

<f:section name="Content">
    <div class="formeditor-loader" data-identifier="moduleLoadingIndicator">
        <core:icon identifier="spinner-circle" size="medium" />
        <div><f:translate key="LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.loading" /></div>
    </div>
    <div class="formeditor-module hidden" data-identifier="moduleWrapper">
        <f:format.raw>{formEditorTemplates}</f:format.raw>
        <section class="formeditor-sidebar formeditor-sidebar-navigation" data-identifier="structureSection">
            <div class="formeditor-sidebar-toggle">
                <button
                    type="button"
                    class="btn btn-default btn-sm"
                    title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.button_toggle_structure')}"
                    data-identifier="formeditorStructureToggle"
                    >
                    <span class="caret"></span>
                    <span class="visually-hidden">{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.button_toggle_structure')}</span>
                </button>
            </div>
            <div class="formeditor-sidebar-inner">
                <f:render section="ElementSidebarTree" />
            </div>
        </section>
        <section class="formeditor-stage" data-identifier="stageContainer">
            <div class="formeditor-stage-inner" data-identifier="stageContainerInner">
                <f:render section="Header" />
                <f:render section="Stage" />
            </div>
        </section>
        <section class="formeditor-sidebar formeditor-sidebar-inspector" data-identifier="inspectorSection">
            <div class="formeditor-sidebar-toggle">
                <button
                    type="button"
                    class="btn btn-default btn-sm"
                    title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.button_toggle_inspector')}"
                    data-identifier="formeditorInspectorToggle"
                    >
                    <span class="caret"></span>
                    <span class="visually-hidden">{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.button_toggle_inspector')}</span>
                </button>
            </div>
            <div class="formeditor-sidebar-inner">
                <f:render section="Inspector" />
            </div>
        </section>
    </div>
</f:section>

<f:section name="ElementSidebarTree">
    <div class="formeditor-tree-root" data-identifier="treeRootContainer">
        <span class="formeditor-tree-icon">
            <core:icon identifier="content-form" />
        </span>
        <span class="formeditor-tree-title" data-identifier="treeRootElement"></span>
    </div>
    <div class="formeditor-tree" data-identifier="structure-element"></div>
</f:section>

<f:section name="Header">
    <div class="formeditor-header">
        <h1 data-identifier="formDefinitionLabel"></h1>
        <button
            type="button"
            class="btn btn-sm btn-default"
            title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.edit_button')}"
            data-identifier="formSettings"
        >
            <core:icon identifier="actions-cog" />
            {f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.edit_button')}
        </button>
    </div>
</f:section>

<f:section name="Stage">
    <div class="panel panel-default" data-identifier="stagePanel">
        <div class="panel-heading" data-identifier="panelHeading">
            <div class="panel-heading-row panel-heading-row-spread">
                <div class="panel-heading-column">
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-default" title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.preview_mode_button')}" data-identifier="buttonViewModePreview"><core:icon identifier="actions-document-view" alternativeMarkupIdentifier="inline" /></button>
                        <button class="btn btn-default" title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.edit_mode_button')}" data-identifier="buttonViewModeAbstract"><core:icon identifier="actions-document-open" alternativeMarkupIdentifier="inline" /></button>
                    </div>
                </div>
                <div class="panel-heading-column">
                    <span class="panel-label" data-identifier="paginationTitle"></span>
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-default" title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.previous_step_button')}" data-identifier="buttonPaginationPrevious"><core:icon identifier="actions-view-paging-previous" alternativeMarkupIdentifier="inline" /></button>
                        <button class="btn btn-default" title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.next_step_button')}" data-identifier="buttonPaginationNext"><core:icon identifier="actions-view-paging-next" alternativeMarkupIdentifier="inline" /></button>
                    </div>
                    <button
                        type="button"
                        class="btn btn-sm btn-default"
                        title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.new_page_button')}"
                        data-identifier="newPage"
                    >
                        <core:icon identifier="actions-page-new" />
                        {f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.new_page_button')}
                    </button>
                </div>
            </div>
        </div>
        <div class="panel-body" data-identifier="stageSection">
            <div data-identifier="stageArea"></div>
            <div data-identifier="stageNewElementRow">
                <div class="formeditor-new-element-container">
                    <button
                        type="button"
                        class="btn btn-sm btn-default"
                        title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.stage.toolbar.new_element')}"
                        data-identifier="stageNewElementBottom"
                    >
                        <core:icon identifier="actions-document-new" />
                        {f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.stage.toolbar.new_element')}
                    </button>
                </div>
            </div>
        </div>
    </div>
</f:section>

<f:section name="Inspector">
    <div class="formeditor-inspector" data-identifier="inspector"></div>
</f:section>

</html>
