{% set oViewConf = oView.getViewConfig() %}

{{ style({ include: oViewConf.getModuleUrl('ddoevisualcms', 'out/src/css/backend.min.css') }) }}
{{ style({ include: oViewConf.getModuleUrl('ddoemedialibrary', 'out/src/css/medialibrary.min.css') }) }}

{% set aShortCodeTypes = [] %}
{% set aShortCodeSelect = [] %}
{% set aShortCodeFields = [] %}
{% set aShortCodeData = [] %}
{% set aCustomStyles = [] %}

{% for oCode in shortCodes %}
    {% set metaData = oCode.getMetaData() %}
    {% set shortCodeTitle = translate({ ident: metaData.getTitle() }) %}

    {% if metaData.getShortCodeTag() != 'column' %}
        {% set aShortCodeTypesItem %}
            <option data-data='{"area":"dd-type-{{ metaData.getShortCodeTag() }}","label":"<i class=\"{{ metaData.getIcon() }}\"></i> {{ shortCodeTitle }}"}' value="{{ metaData.getShortCodeTag() }}">{{ shortCodeTitle }}</option>
        {% endset %}
        {% set aShortCodeTypes = aShortCodeTypes|merge([aShortCodeTypesItem])  %}

        {% set aShortCodeSelectItem %}
            <button class="btn btn-default dd-widget-select-box" data-widget="{{ metaData.getShortCodeTag() }}" data-color="{{ metaData.getBackgroundColor() }}" title="{{ shortCodeTitle }}">
            <span class="dd-widget-select-description">
                <i class="{{ metaData.getIcon() }} fa-2x"></i><br />
                <span>{{ shortCodeTitle }}</span>
            </span>
            </button>
        {% endset %}
        {% set aShortCodeSelect = aShortCodeSelect|merge([aShortCodeSelectItem])  %}
    {% else %}
        {% set aShortCodeTypesItem %}
            <option data-data='{"area":"dd-type-{{ metaData.getShortCodeTag() }}","label":"<i class=\"{{ metaData.getIcon() }}\"></i> {{ shortCodeTitle }}"}' value="{{ metaData.getShortCodeTag() }}">{{ shortCodeTitle }}</option>
        {% endset %}
        {% set aShortCodeTypes = aShortCodeTypes|merge([aShortCodeTypesItem])  %}
    {% endif %}

    {% for sOptionName, aOption in oCode.getOptions() %}

        {% set aShortCodeFieldsItem %}
            {% if aOption.getType() %}{% include aOption.getTemplate() %}{% endif %}
        {% endset %}
        {% set aShortCodeFields = aShortCodeFields|merge([aShortCodeFieldsItem])  %}

    {% endfor %}

    {% set aShortCodeDataItem %}
        <script type="text/javascript">
            window.shortcodes[ '{{ metaData.getShortCodeTag() }}' ] = {
                previewParam: '{{ metaData.getPreviewOptionKey() }}',
                name: '{{ translate({ ident: metaData.getTitle() }) }}',
                icon: '{{ metaData.getIcon() }}'
            };
        </script>
    {% endset %}
    {% set aShortCodeData = aShortCodeData|merge([aShortCodeDataItem]) %}

    {% set aCustomStylesItem %}
        <style type="text/css">
            .dd-veditor-widget.dd-widget-type-{{ metaData.getShortCodeTag() }} > .dd-widget-inner {
                background: {{ metaData.getBackgroundColor() }};
            }
        </style>
    {% endset %}
    {% set aCustomStyles = aCustomStyles|merge([aCustomStylesItem]) %}

{% endfor %}


{% capture append = "content" %}

    {% for sStyle in aCustomStyles %}
        {{ sStyle|raw }}
    {% endfor %}

    <div class="dd-ajax-loader dd-main-loader">
        <img src="{{ oViewConf.getModuleUrl('ddoevisualcms','out/src/img/loading.svg')|raw }}" />
    </div>

    <div class="dd-visual-editor">

        <form name="transfer" id="transfer" action="{{ oViewConf.getSelfLink()|replace({'editlanguage': '_editlanguage'})|raw }}" method="post">
            {{ oViewConf.getHiddenSid()|raw }}
            <input type="hidden" name="cl" value="ddoevisualcmsadmin">
        </form>

        <div class="row" style="height: 100%;">

            <div class="col-md-3 col-sm-4 col-xs-12 hidden-xs d-none d-lg-block" style="height: 100%;">

                <div id="settings">

                    {% block visualcms_settings_form %}

                        <form name="myedit" class="form" role="form" id="myedit" action="{{ oViewConf.getSelfLink()|replace({'editlanguage': '_editlanguage'})|raw }}" method="post">

                            {% block visualcms_settings_form_hidden %}
                                {{ oViewConf.getHiddenSid()|raw }}
                                <input type="hidden" name="cl" value="ddoevisualcmscontent">
                                <input type="hidden" name="fnc" value="">
                                <input type="hidden" id="elm_edit_oxid" name="oxid" value="">

                                <input type="hidden" name="editval[oxcontents__ddcustomcss]" id="elm_edit_css" value="" />
                                <input type="hidden" name="previewPopup" id="previewPopup" value="1">
                                <input type="hidden" name="saveWidgetsOnly" value="0">
                            {% endblock %}

                            <div class="form-group" style="margin-bottom: 0;">

                                <div class="dd-veditor-activestate-box">

                                    {% block visualcms_settings_form_activestate %}

                                        <div class="form-group clearfix">
                                            <div class="checkbox pull-left">
                                                <label>
                                                    <input type="hidden" name="editval[oxcontents__oxactive]" value="0" />
                                                    <input type="checkbox" name="editval[oxcontents__oxactive]" id="elm_edit_active" value="1" /> {{ translate({ ident: "DD_VISUAL_EDITOR_ACTIVE" }) }}
                                                </label>
                                            </div>
                                            <div class="pull-right">
                                                <a href="javascript:void(null)" class="dd-veditor-timespan-toggle text-muted">{{ translate({ ident: "DD_VISUAL_EDITOR_ACTIVE_TIMESPAN_SELECT" }) }}</a>
                                            </div>
                                        </div>

                                        <div class="dd-veditor-timespan">

                                            <div class="row">

                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label for="elm_edit_active_from" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_ACTIVE_TIMESPAN_FROM" }) }} <i class="fa-solid fa-circle-info" title="{{ translate({ ident: "DD_VISUAL_EDITOR_ACTIVE_TIMESPAN_INFO" }) }}" data-toggle="tooltip" data-container="body"></i></label>
                                                        <input type="text" name="editval[oxcontents__ddactivefrom]" class="form-control" id="elm_edit_active_from" placeholder="YYYY-MM-DD" />
                                                    </div>
                                                </div>
                                                <div class="col-sm-6">
                                                    <div class="form-group">
                                                        <label for="elm_edit_active_until" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_ACTIVE_TIMESPAN_UNTIL" }) }} <i class="fa-solid fa-circle-info" title="{{ translate({ ident: "DD_VISUAL_EDITOR_ACTIVE_TIMESPAN_INFO" }) }}" data-toggle="tooltip" data-container="body"></i></label>
                                                        <input type="text" name="editval[oxcontents__ddactiveuntil]" class="form-control" id="elm_edit_active_until" placeholder="YYYY-MM-DD" />
                                                    </div>
                                                </div>

                                            </div>

                                        </div>

                                    {% endblock %}

                                </div>

                            </div>

                            <div class="clearfix"></div>

                            <div class="dd-veditor-form-settings">

                                <div class="dd-tab-form">

                                    <ul class="nav nav-tabs" role="tablist">
                                        {% block visualcms_settings_form_tabs %}
                                            <li role="presentation" class="active"><a href="#tab_settings_main" role="tab" data-toggle="tab">{{ translate({ ident: "DD_VISUAL_EDITOR_SETTINGS_MAIN" }) }}</a></li>
                                            <li role="presentation"><a href="#tab_settings_advanced" role="tab" data-toggle="tab">{{ translate({ ident: "DD_VISUAL_EDITOR_SETTINGS_ADVANCED" }) }}</a></li>
                                            <li role="presentation"><a href="#tab_settings_seo" role="tab" data-toggle="tab">{{ translate({ ident: "DD_VISUAL_EDITOR_SETTINGS_SEO" }) }}</a></li>
                                        {% endblock %}
                                    </ul>

                                    <div class="tab-content">

                                        {% block visualcms_settings_form_tabs_content %}

                                            <div role="tabpanel" class="tab-pane active" id="tab_settings_main">

                                                {% block visualcms_settings_form_tabs_main %}

                                                    {% if blocks %}
                                                        <div class="form-group dd-cms-type">
                                                            <label for="elm_edit_cms" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_TYPE" }) }}</label>
                                                            <select name="cms_type" class="form-control dd-picker dd-area-select dd-cms-type-select" data-area-group-value="dd-cms-type" data-style="btn-inverse" id="elm_edit_cms_type">
                                                                <option data-data='{"area":"dd-type-cms-default"}' value="default" selected="selected">{{ translate({ ident: "DD_VISUAL_EDITOR_TYPE_STANDARD" }) }}</option>
                                                                <option data-data='{"area":"dd-type-cms-block"}' value="block">{{ translate({ ident: "DD_VISUAL_EDITOR_TYPE_BLOCK" }) }}</option>
                                                            </select>
                                                        </div>

                                                        <div data-area="dd-type-cms-block" data-area-group="dd-cms-type" style="display: none;">

                                                            <div class="form-group dd-cms-block">
                                                                <label for="elm_edit_block" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_BLOCK" }) }}</label>
                                                                <select name="block" class="form-control dd-picker dd-block-picker" placeholder="{{ translate({ ident: "DD_VISUAL_EDITOR_CHOOSE_BLOCK" }) }}" id="elm_edit_block">
                                                                    <option></option>
                                                                    {% for ident, block in blocks %}
                                                                        <option value="{{ ident }}">{{ block }}</option>
                                                                    {% endfor %}
                                                                </select>
                                                            </div>

                                                            <div class="form-group dd-cms-object-type" style="display: none;">
                                                                <label for="elm_edit_object_type" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_BLOCK_OBJECT_TYPE" }) }}</label>
                                                                <select name="editval[oxcontents__ddobjecttype]" class="form-control dd-picker dd-block-object-picker dd-area-select" data-area-group-value="dd-object-type" data-style="btn-inverse" id="elm_edit_object_type" placeholder="{{ translate({ ident: "DD_VISUAL_EDITOR_CHOOSE_BLOCK_OBJECT" }) }}">
                                                                    <option selected="selected"></option>
                                                                    <option data-data='{"area":"dd-object-type-empty"}' value="empty">{{ translate({ ident: "DD_VISUAL_EDITOR_BLOCK_OBJECT_EMPTY" }) }}</option>
                                                                    <option data-data='{"area":"dd-object-type-article"}' value="article">{{ translate({ ident: "DD_VISUAL_EDITOR_BLOCK_OBJECT_ARTICLE" }) }}</option>
                                                                    <option data-data='{"area":"dd-object-type-category"}' value="category">{{ translate({ ident: "DD_VISUAL_EDITOR_BLOCK_OBJECT_CATEGORY" }) }}</option>
                                                                    <option data-data='{"area":"dd-object-type-manufacturer"}' value="manufacturer">{{ translate({ ident: "DD_VISUAL_EDITOR_BLOCK_OBJECT_MANUFACTURER" }) }}</option>
                                                                </select>
                                                            </div>

                                                            <div class="form-group dd-cms-object-id" data-area="dd-object-type-article" data-area-group="dd-object-type" style="display: none;">
                                                                <label for="elm_edit_object_article" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_BLOCK_OBJECT_ARTICLE" }) }}</label>
                                                                <select name="editval[oxcontents__ddobjectid][article]" class="form-control dd-article-picker" id="elm_edit_object_article">
                                                                    <option></option>
                                                                </select>
                                                            </div>

                                                            <div class="form-group dd-cms-object-id" data-area="dd-object-type-category" data-area-group="dd-object-type" style="display: none;">
                                                                <label for="elm_edit_object_category" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_BLOCK_OBJECT_CATEGORY" }) }}</label>
                                                                <select name="editval[oxcontents__ddobjectid][category]" class="form-control dd-category-picker" id="elm_edit_object_category">
                                                                    <option></option>
                                                                </select>
                                                            </div>

                                                            <div class="form-group dd-cms-object-id" data-area="dd-object-type-manufacturer" data-area-group="dd-object-type" style="display: none;">
                                                                <label for="elm_edit_object_manufacturer" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_BLOCK_OBJECT_MANUFACTURER" }) }}</label>
                                                                <select name="editval[oxcontents__ddobjectid][manufacturer]" class="form-control dd-manufacturer-picker" id="elm_edit_object_manufacturer">
                                                                    <option></option>
                                                                </select>
                                                            </div>

                                                        </div>
                                                    {% endif %}

                                                    <div data-area="dd-type-cms-default" data-area-group="dd-cms-type">

                                                        <div class="form-group">
                                                            <div class="checkbox">
                                                                <label>
                                                                    <input type="hidden" name="new" value="0" />
                                                                    <input type="checkbox" name="new" id="elm_edit_new" value="1" /> {{ translate({ ident: "DD_VISUAL_EDITOR_NEW" }) }}
                                                                </label>
                                                            </div>
                                                        </div>

                                                        {% block visualcms_settings_form_cmssearch %}

                                                            <div class="form-group row dd-cms-search">
                                                                <div class="col-sm-12">
                                                                    <label for="elm_edit_cms" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_CMS" }) }}</label>
                                                                </div>
                                                                <div class="col-sm-9" style="padding-right: 0;">
                                                                    <select name="content" class="form-control dd-cms-picker" placeholder="{{ translate({ ident: "DD_VISUAL_EDITOR_CHOOSE_CMS" }) }}" id="elm_edit_cms">
                                                                        <option></option>
                                                                    </select>
                                                                </div>
                                                                <div class="col-sm-3 text-right">
                                                                    <a href="javascript:void(null)" class="dd-veditor-treeview-action btn btn-primary btn-block" title="">
                                                                        <i class="fas fa-sitemap"></i>
                                                                    </a>
                                                                </div>
                                                            </div>

                                                        {% endblock %}

                                                        <div class="form-group dd-cms-title">
                                                            <label for="elm_edit_title" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_TITLE" }) }}</label>
                                                            <input type="text" name="editval[oxcontents__oxtitle]" class="form-control" id="elm_edit_title" />
                                                        </div>

                                                        <div class="form-group">
                                                            <label for="elm_edit_ident" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_IDENT" }) }}</label>
                                                            <input type="text" name="editval[oxcontents__oxloadid]" class="form-control" id="elm_edit_ident" />
                                                            <small class="help-block">{{ translate({ ident: "DD_VISUAL_EDITOR_IDENT_INFO" }) }}</small>
                                                        </div>

                                                        <div class="form-group">
                                                            <label for="elm_edit_folder" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_FOLDER" }) }}</label>
                                                            <select name="editval[oxcontents__oxfolder]" class="form-control dd-form-picker" id="elm_edit_folder">

                                                                {% for field, color in aFolder %}
                                                                    <option value="{{ field }}" style="color: {{ color }};" data-data='{"color":"{{ color }}"}'{% if field|replace({"_RR": ""=="CMSFOLDER_NONE"}) %} selected{% endif %}>{{ translate({ ident: field }) }}</option>
                                                                {% endfor %}

                                                            </select>
                                                        </div>

                                                        <div class="dd-cms-type-infos">

                                                            <div class="form-group dd-cms-url" style="display: none;">
                                                                <label for="elm_edit_ident" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_URL" }) }}</label>
                                                                <p class="form-control-static">
                                                                    <code>-</code>
                                                                </p>
                                                            </div>

                                                            <div class="form-group dd-cms-snippet" style="display: none;">
                                                                <label for="elm_snippet" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_SNIPPET" }) }}</label>
                                                                <div class="input-group">
                                                                    <input type="text" name="snippet" class="form-control" id="elm_snippet" readonly="readonly" />
                                                                    <span class="input-group-btn">
                                                                        <button class="btn btn-default dd-clipboard-action" data-clipboard-target="#elm_snippet" type="button">
                                                                            <i class="fa-solid fa-clipboard"></i>
                                                                        </button>
                                                                    </span>
                                                                </div>
                                                                <span class="form-control-feedback text-success">
                                                                    <i class="fa-solid fa-check"></i> {{ translate({ ident: "DD_VISUAL_EDITOR_SNIPPET_COPIED" }) }}
                                                                </span>
                                                            </div>

                                                        </div>

                                                    </div>

                                                {% endblock %}

                                            </div>

                                            <div role="tabpanel" class="tab-pane" id="tab_settings_advanced">

                                                {% block visualcms_settings_form_tabs_advanced %}

                                                    <div class="form-group">
                                                        <label>{{ translate({ ident: "DD_VISUAL_EDITOR_ADVANCED_BEHAVIOR" }) }}</label>

                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="hidden" name="editval[oxcontents__ddplaintext]" value="0" />
                                                                <input type="checkbox" name="editval[oxcontents__ddplaintext]" id="elm_edit_plaintext" value="1" /> {{ translate({ ident: "DD_VISUAL_EDITOR_USE_PLAIN_CONTENT" }) }} <i class="fa-solid fa-circle-info" title="{{ translate({ ident: "DD_VISUAL_EDITOR_USE_PLAIN_CONTENT_INFO" }) }}" data-toggle="tooltip" data-container="body" data-placement="right"></i>
                                                            </label>
                                                        </div>

                                                    </div>

                                                    <div class="form-group">
                                                        <label>{{ translate({ ident: "DD_VISUAL_EDITOR_ADVANCED_TYPE" }) }}</label>

                                                        <div class="radio">
                                                            <label>
                                                                <input type="radio" name="editval[oxcontents__oxtype]" id="elm_edit_type_0" value="0" checked /> {{ translate({ ident: "CONTENT_MAIN_SNIPPET" }) }} <i class="fa-solid fa-circle-info" title="{{ "HELP_CONTENT_MAIN_SNIPPET"|translate|striptags }}" data-toggle="tooltip" data-container="body" data-placement="right"></i>
                                                            </label>
                                                        </div>

                                                        <div class="radio">
                                                            <label>
                                                                <input type="radio" name="editval[oxcontents__oxtype]" id="elm_edit_type_2" value="2" /> {{ translate({ ident: "CONTENT_MAIN_CATEGORY" }) }} <i class="fa-solid fa-circle-info" title="{{ "HELP_CONTENT_MAIN_CATEGORY"|translate|striptags }}" data-toggle="tooltip" data-container="body" data-placement="right"></i>
                                                            </label>
                                                        </div>

                                                        <div class="radio">
                                                            <label>
                                                                <input type="radio" name="editval[oxcontents__oxtype]" id="elm_edit_type_3" value="3" /> {{ translate({ ident: "CONTENT_MAIN_MANUAL" }) }} <i class="fa-solid fa-circle-info" title="{{ "HELP_CONTENT_MAIN_MANUAL"|translate|striptags }}" data-toggle="tooltip" data-container="body" data-placement="right"></i>
                                                            </label>
                                                        </div>
                                                    </div>

                                                    <div class="form-group dd-cms-cat" style="display: none;">
                                                        <label for="elm_edit_catid" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_CATEGORY" }) }}</label>
                                                        <select name="editval[oxcontents__oxcatid]" class="form-control dd-form-picker" id="elm_edit_catid">

                                                            {% for sCatId, sCatTitle in aCategories %}
                                                                <option value="{{ sCatId }}">{{ sCatTitle|raw }}</option>
                                                            {% endfor %}

                                                        </select>
                                                    </div>

                                                    <div class="form-group">
                                                        <label>{{ translate({ ident: "DD_VISUAL_EDITOR_ADVANCED_LAYOUT" }) }}</label>

                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="hidden" name="editval[oxcontents__ddhidetitle]" value="0" />
                                                                <input type="checkbox" name="editval[oxcontents__ddhidetitle]" id="elm_edit_hide_title" value="1" /> {{ translate({ ident: "DD_VISUAL_EDITOR_HIDE_TITLE" }) }} <i class="fa-solid fa-circle-info" title="{{ translate({ ident: "DD_VISUAL_EDITOR_HIDE_TITLE_INFO" }) }}" data-toggle="tooltip" data-container="body" data-placement="right"></i>
                                                            </label>
                                                        </div>

                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="hidden" name="editval[oxcontents__ddislanding]" value="0" />
                                                                <input type="checkbox" name="editval[oxcontents__ddislanding]" id="elm_edit_islanding" value="1" /> {{ translate({ ident: "DD_VISUAL_EDITOR_IS_LANDING" }) }} <i class="fa-solid fa-circle-info" title="{{ translate({ ident: "DD_VISUAL_EDITOR_IS_LANDING_INFO" }) }}" data-toggle="tooltip" data-container="body" data-placement="right"></i>
                                                            </label>
                                                        </div>

                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="hidden" name="editval[oxcontents__ddfullwidth]" value="0" />
                                                                <input type="checkbox" name="editval[oxcontents__ddfullwidth]" id="elm_edit_fullwidth" value="1" /> {{ translate({ ident: "DD_VISUAL_EDITOR_FULLWIDTH" }) }} <i class="fa-solid fa-circle-info" title="{{ translate({ ident: "DD_VISUAL_EDITOR_FULLWIDTH_INFO" }) }}" data-toggle="tooltip" data-container="body" data-placement="right"></i>
                                                            </label>
                                                        </div>

                                                    </div>

                                                    <div class="form-group">
                                                        <label for="elm_edit_cssclass" class="control-label">{{ translate({ ident: "DD_VISUAL_EDITOR_GLOBAL_CSS_CLASS" }) }}</label>
                                                        <input type="text" name="editval[oxcontents__ddcssclass]" class="form-control" id="elm_edit_cssclass" />
                                                    </div>

                                                {% endblock %}

                                            </div>

                                            <div role="tabpanel" class="tab-pane" id="tab_settings_seo">

                                                {% block visualcms_settings_form_tabs_seo %}

                                                    <div class="form-group">
                                                        <div class="checkbox">
                                                            <label>
                                                                <input type="hidden" name="aSeoData[oxfixed]" value="0" />
                                                                <input type="checkbox" name="aSeoData[oxfixed]" id="elm_seo_fixed" value="1" /> {{ translate({ ident: "GENERAL_SEO_FIXED" }) }} <i class="fa-solid fa-circle-info" title="{{ "HELP_GENERAL_SEO_FIXED"|translate|striptags }}" data-toggle="tooltip" data-container="body" data-placement="right"></i>
                                                            </label>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="elm_seo_url" class="control-label">{{ translate({ ident: "GENERAL_SEO_URL" }) }}</label>
                                                        <input type="text" name="aSeoData[oxseourl]" class="form-control" id="elm_seo_url" />
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="elm_seo_keywords" class="control-label">{{ translate({ ident: "GENERAL_SEO_OXKEYWORDS" }) }} <i class="fa-solid fa-circle-info" title="{{ "HELP_GENERAL_SEO_OXKEYWORDS"|translate|striptags }}" data-toggle="tooltip" data-container="body" data-placement="right"></i></label>
                                                        <textarea name="aSeoData[oxkeywords]" class="form-control" id="elm_seo_keywords" style="height: 100px;"></textarea>
                                                    </div>

                                                    <div class="form-group">
                                                        <label for="elm_seo_description" class="control-label">{{ translate({ ident: "GENERAL_SEO_OXDESCRIPTION" }) }} <i class="fa-solid fa-circle-info" title="{{ "HELP_GENERAL_SEO_OXDESCRIPTION"|translate|striptags }}" data-toggle="tooltip" data-container="body" data-placement="right"></i></label>
                                                        <textarea name="aSeoData[oxdescription]" class="form-control" id="elm_seo_description" style="height: 100px;"></textarea>
                                                    </div>

                                                {% endblock %}

                                            </div>

                                        {% endblock %}

                                    </div>

                                </div>

                            </div>

                            <div class="clearfix"></div>

                            <div class="dd-veditor-form-actions">

                                {% block visualcms_settings_form_actions %}

                                    <div class="form-group">
                                        <ul class="dd-veditor-form-action-buttons">
                                            {% block visualcms_settings_form_actions_buttons %}
                                                {% if not demo %}
                                                    <li>
                                                        <button type="submit" onclick="document.myedit.fnc.value='save'" class="btn btn-success"><i class="fa-solid fa-floppy-disk" style="margin-right: 5px;"></i> {{ translate({ ident: "DD_VISUAL_EDITOR_SAVE" }) }}</button>
                                                    </li>
                                                {% endif %}
                                                <li>
                                                    <button type="submit" class="btn btn-info dropdown-toggle btn-preview" title="{{ translate({ ident: "DD_VISUAL_EDITOR_PREVIEW_POPUP_INFO" }) }}">
                                                        <i class="fa-solid fa-up-right-from-square" style="margin-right: 5px;"></i> {{ translate({ ident: "DD_VISUAL_EDITOR_PREVIEW" }) }}
                                                    </button>
                                                </li>
                                                {% if not demo %}
                                                    <li>
                                                        <button type="submit" onclick="document.myedit.fnc.value='delete'" class="btn btn-danger dd-delete-action" disabled><i class="fa-solid fa-trash" style="margin-right: 5px;"></i> {{ translate({ ident: "DD_VISUAL_EDITOR_DELETE" }) }}</button>
                                                    </li>
                                                {% endif %}
                                            {% endblock %}
                                        </ul>
                                        <div class="clearfix"></div>

                                        {% if demo %}
                                            <div style="padding: 5px 5px 0;">
                                                <small class="text-muted">Im Demomodus ist das Speichern deaktiviert.</small>
                                            </div>
                                        {% endif %}

                                        <input type="hidden" name="selectedlanguage" value="{{ sActiveLang }}" />
                                    </div>

                                {% endblock %}

                            </div>

                        </form>

                    {% endblock %}

                </div>

            </div>

            <div class="col-md-9 col-sm-8 col-xs-12" style="height: 100%;">

                <div id="widgets" class="dd-veditor">

                    {% block visualcms_editor %}

                        <div class="dd-ajax-loader dd-content-loader" style="display: none;">
                            <img src="{{ oViewConf.getModuleUrl('ddoevisualcms','out/src/img/loading.svg')|raw }}" />
                        </div>

                        <div class="dd-veditor-actions">

                            {% block visualcms_editor_actions %}

                                <div class="pull-left">
                                    <ul class="nav nav-pills">
                                        <li>
                                            <a href="javascript:void(null)" class="dd-veditor-widget-action" title="{{ translate({ ident: "DD_VISUAL_EDITOR_ADD_WIDGET" }) }}" data-toggle="tooltip" data-placement="bottom" data-container="body" data-delay='{"show":500,"hide":50}'>
                                                <i class="fa-solid fa-plus"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(null)" class="dd-veditor-media-action" title="{{ translate({ ident: "DD_VISUAL_EDITOR_ADD_IMAGE" }) }}" data-toggle="tooltip" data-placement="bottom" data-container="body" data-delay='{"show":500,"hide":50}'>
                                                <i class="fa-regular fa-file-image"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(null)" class="dd-veditor-column-action" title="{{ translate({ ident: "DD_VISUAL_EDITOR_ADD_COLUMN" }) }}" data-toggle="tooltip" data-placement="bottom" data-container="body" data-delay='{"show":500,"hide":50}'>
                                                <i class="fa-solid fa-table-columns"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="pull-right">
                                    <ul class="nav nav-right nav-pills">
                                        <li>
                                            <a href="javascript:void(null)" class="dd-veditor-css-action" title="{{ translate({ ident: "DD_VISUAL_EDITOR_CUSTOM_CSS" }) }}" data-toggle="tooltip" data-placement="bottom" data-container="body" data-delay='{"show":500,"hide":50}'>
                                                <i class="fa-solid fa-wand-magic"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(null)" class="dd-veditor-template-action" title="{{ translate({ ident: "DD_VISUAL_EDITOR_TEMPLATES" }) }}" data-toggle="tooltip" data-placement="bottom" data-container="body" data-delay='{"show":500,"hide":50}'>
                                                <i class="fa-solid fa-bookmark"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(null)" class="dd-veditor-source-action" title="{{ translate({ ident: "DD_VISUAL_EDITOR_SHOW_SOURCE" }) }}" data-toggle="tooltip" data-placement="bottom" data-container="body" data-delay='{"show":500,"hide":50}'>
                                                <i class="fa-solid fa-code"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(null)" class="dd-veditor-delete-all-action text-danger" title="{{ translate({ ident: "DD_VISUAL_EDITOR_DELETE_ALL_WIDGETS" }) }}" data-toggle="tooltip" data-placement="bottom" data-container="body" data-delay='{"show":500,"hide":50}'>
                                                <i class="fa-solid fa-trash"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                            {% endblock %}

                        </div>

                        <div class="dd-veditor-wrapper">

                            {% block visualcms_editor_wrapper %}

                                <div class="dd-veditor-grid grid-stack grid-stack-{{ moduleSettings.getGridsterSize()|default('6') }} grid">
                                    {% block visualcms_editor_inner %}{% endblock %}
                                </div>

                                <div class="dd-veditor-source" style="display: none;">
                                    {% block visualcms_editor_sourcecode %}
                                        <textarea name="source" class="form-control"></textarea>
                                    {% endblock %}
                                </div>

                            {% endblock %}

                        </div>

                    {% endblock %}

                </div>

            </div>

        </div>

    </div>

    <script type="text/javascript">
        {% block visualcms_script_settings %}
        window.shortcodes = {};
        window.debug = {{ blDebugMode ? 'true' : 'false' }};
        window.options = { gridSize: {{ moduleSettings.getGridsterSize()|default('6') }}, gridFrontendSize: {{ moduleSettings.getGridSize()|default('12') }}, defaultWidgetSize: {{ moduleSettings.getDefaultWidgetSize()|default('1') }} };
        window.cssclasses = {% if moduleSettings.getPredefinedCss() %}{{ moduleSettings.getPredefinedCss()|json_encode|raw }}{% else %}[]{% endif %};
        window.preloadid = {% if sPreloadContentId %}'{{ sPreloadContentId }}'{% else %}null{% endif %};
        window.adminLang = '{{ sActiveLangAbbr }}';
        window.shopIsSSL = {{ isSSLShop }};
        {% endblock %}
    </script>

    {% for sScript in aShortCodeData %}
        {{ sScript|raw }}
    {% endfor %}

{% endcapture %}

{% capture append = "modal" %}

    {% include '@ddoevisualcms/admin/widget/modal.html.twig' %}

    <div class="modal fade dd-css-modal" tabindex="-1" role="dialog" aria-labelledby="cssModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form method="post" role="form" class="form-horizontal dd-css-form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="cssModalLabel">{{ translate({ ident: "DD_VISUAL_EDITOR_CUSTOM_CSS" }) }}</h4>
                    </div>
                    <div class="modal-body">

                        {% block visualcms_less_editor %}
                            <div class="dd-less-editor"></div>
                        {% endblock %}

                    </div>
                    <div class="modal-footer">
                        {% block visualcms_less_editor_actions %}
                            <button type="button" class="btn btn-link" data-dismiss="modal">{{ translate({ ident: "DD_VISUAL_EDITOR_CANCEL" }) }}</button>
                            <button type="submit" class="btn btn-primary">{{ translate({ ident: "DD_VISUAL_EDITOR_APPLY" }) }}</button>
                        {% endblock %}
                    </div>
                </form>
            </div>
        </div>
    </div>

    {% include "@ddoevisualcms/admin/template/modal.html.twig" %}

    {% include "@ddoevisualcms/admin/preview_selection.html.twig" %}

    {% include "@ddoevisualcms/admin/template/timer.html.twig" %}

    <div class="modal fade dd-treeview-modal" tabindex="-1" role="dialog" aria-labelledby="treeviewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <form method="post" role="form" class="form-horizontal dd-treeview-form" action="{{ oViewConf.getSelfLink()|raw }}cl=ddoevisualcmstreeview">
                    <input type="hidden" name="elm_edit_treeview_contentid" id="elm_edit_treeview_contentid" value="" />
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="treeviewModalLabel">{{ translate({ ident: "DD_VISUAL_EDITOR_TREEVIEW" }) }}</h4>
                    </div>
                    <div class="modal-body">

                        <div class="dd-treeview-form-fields" style="display: block;">

                            <div class="dd-tab-form">

                                <ul class="nav nav-tabs" role="tablist">
                                    {% block visualcms_treeview_tabs %}
                                        <li role="presentation" class="active"><a href="#tab_treeview_main" id="btn_tab_treeview_main" role="tab" data-toggle="tab">{{ translate({ ident: "DD_VISUAL_EDITOR_TREEVIEW_MAIN_TAB" }) }}</a></li>
                                        <li role="presentation"><a href="#tab_treeview_snippets" id="btn_tab_treeview_snippets" role="tab" data-toggle="tab">{{ translate({ ident: "DD_VISUAL_EDITOR_TREEVIEW_SNIPPETS_TAB" }) }}</a></li>
                                    {% endblock %}
                                </ul>

                                <div class="tab-content">

                                    {% block visualcms_treeview_tabs_content %}

                                        <div role="tabpanel" class="tab-pane active" id="tab_treeview_main">

                                            {% block visualcms_treeview_tabs_main %}

                                                {% block visualcms_treeview_tabs_main_search %}
                                                    <div class="row">
                                                        <div class="col-sm-4 pull-right dd-treeview-search-wrapper">
                                                            <input type="text" class="form-control input-sm dd-treeview-search-main" placeholder="{{ translate({ ident: "DD_VISUAL_EDITOR_CHOOSE_CMS" }) }}" />
                                                            <a href="javascript:void(null);" id="btn_clear_treeview_search_main" class="pull-right"><i class="fa-solid fa-circle-xmark"></i></a>
                                                        </div>
                                                    </div>

                                                {% endblock %}


                                                <div class="panel treeview-panel">
                                                    <div class="panel-body">
                                                        <div class="dd-ajax-loader dd-treeview-main-loader">
                                                            <img src="{{ oViewConf.getModuleUrl('ddoevisualcms','out/src/img/loading.svg')|raw }}" />
                                                        </div>
                                                        <div id="dd-treeview-main-inner"></div>
                                                        <div class="col-xs-12 dd-treeview-main-no-results">{{ translate({ ident: "DD_VISUAL_EDITOR_TREEVIEW_NO_RESULTS" }) }}</div>
                                                    </div>
                                                </div>

                                            {% endblock %}

                                        </div>

                                        <div role="tabpanel" class="tab-pane" id="tab_treeview_snippets">

                                            {% block visualcms_treeview_tabs_snippets %}

                                                {% block visualcms_treeview_tabs_snippets_search %}
                                                    <div class="row">
                                                        <div class="col-sm-4 pull-right dd-treeview-search-wrapper">
                                                            <input type="text" class="form-control input-sm dd-treeview-search-snippets" placeholder="{{ translate({ ident: "DD_VISUAL_EDITOR_CHOOSE_CMS" }) }}" />
                                                            <a href="javascript:void(null);" id="btn_clear_treeview_search_snippets" class="pull-right"><i class="fa-solid fa-circle-xmark"></i></a>
                                                        </div>
                                                    </div>
                                                {% endblock %}

                                                <div class="panel snippets-panel">
                                                    <div class="panel-body">
                                                        <div class="dd-ajax-loader dd-treeview-snippets-loader">
                                                            <img src="{{ oViewConf.getModuleUrl('ddoevisualcms','out/src/img/loading.svg')|raw }}" />
                                                        </div>
                                                        <div id="dd-treeview-snippets-inner"></div>
                                                        <div class="col-xs-12 dd-treeview-snippets-no-results">{{ translate({ ident: "DD_VISUAL_EDITOR_TREEVIEW_NO_RESULTS" }) }}</div>
                                                    </div>
                                                </div>

                                            {% endblock %}

                                        </div>

                                    {% endblock %}

                                </div>

                            </div>

                        </div>

                    </div>
                    <div class="modal-footer">
                        {% block visualcms_treeview_actions %}
                            <button type="button" class="btn btn-link" data-dismiss="modal">{{ translate({ ident: "DD_VISUAL_EDITOR_CANCEL" }) }}</button>
                            <button type="submit" class="btn btn-primary">{{ translate({ ident: "DD_VISUAL_EDITOR_TREEVIEW_LOAD_CONTENT" }) }}</button>
                        {% endblock %}
                    </div>
                </form>
            </div>
        </div>
    </div>

{% endcapture %}

{% capture append = "header" %}

    <form class="navbar-form navbar-right hidden-xs d-none d-lg-block">

        {% block visualcms_header_navbar_actions %}

            <div class="form-group" id="demodata-button-block" data-url="{{ oViewConf.getSelfLink()|raw }}cl=ddoevisualcmsdemodata">
                {% if blHasDemoPage %}
                    <button type="button" class="btn btn-primary dd-demodata-action hasDemodata">
                        {{ translate({ ident: "DD_VISUAL_EDITOR_LOAD_DEMODATA" }) }}
                    </button>
                {% else %}
                    <button type="button" class="btn btn-primary dd-demodata-action">
                        {{ translate({ ident: "DD_VISUAL_EDITOR_DEMODATA_INSTALL" }) }}
                    </button>
                {% endif %}
            </div>

            <div class="form-group">
                <select name="lang" class="form-control" id="elm_lang">
                    {% for sId, sLangName in lang %}
                        <option value="{{ sId }}"{% if sId == sActiveLang %} selected{% endif %}>{{ sLangName }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <a href="https://docs.oxid-esales.com/modules/vcms/{{ oView.getVisualCmsHelpVersion() }}" class="btn btn-default" target="_blank">
                    <i class="fa-regular fa-circle-question"></i> {{ translate({ ident: "DD_VISUAL_EDITOR_HELP" }) }}
                </a>
            </div>

        {% endblock %}

    </form>

{% endcapture %}

<script type="module" src="{{ oViewConf.getModuleUrl('ddoevisualcms', 'out/src/js/ace.min.js') }}"></script>
<script>
    window.wysiwygUrl = "{{ oViewConf.getModuleUrl('ddoewysiwyg', 'out/src/js/summernote/ddoesummernote.min.js') }}";
    window.mediaLibraryUrl = "{{ oViewConf.getModuleUrl('ddoemedialibrary', 'out/src/js/base.min.js') }}";

    top.basefrm.MediaLibraryModuleUrl = "{{ oViewConf.getModuleUrl('ddoemedialibrary', 'out/src/js/base.min.js') }}";
    top.basefrm.MediaLibraryStyles = '{{ oViewConf.getModuleUrl('ddoemedialibrary', 'out/src/css/overlay.min.css') }}';
    top.basefrm.editorControllerUrl = '{{ oViewConf.getSelfLink()|cat('cl=ddoemedia_wrapper&overlay=1')|replace({'&amp;':'&'})|raw }}';
</script>

{{ script({ include: oViewConf.getModuleUrl('ddoevisualcms', 'out/src/js/jquery.min.js'), priority: 1, dynamic: __oxid_include_dynamic }) }}
{{ script({ include: oViewConf.getModuleUrl('ddoevisualcms', 'out/src/js/jstree.min.js'), priority: 1, dynamic: __oxid_include_dynamic }) }}
{{ script({ include: oViewConf.getModuleUrl('ddoevisualcms', 'out/src/js/selectize.min.js'), priority: 1, dynamic: __oxid_include_dynamic }) }}

{{ script({ include: oViewConf.getModuleUrl('ddoewysiwyg', 'out/src/js/summernote/summernote.min.js'), priority: 1, dynamic: __oxid_include_dynamic }) }}
{% if sActiveLangAbbr == 'de' %}
    {{ script({ include: oViewConf.getModuleUrl('ddoewysiwyg', 'out/src/js/summernote/summernote-de-DE.min.js'), priority: 20, dynamic: __oxid_include_dynamic }) }}
{% endif %}

<script type="module" src="{{ oViewConf.getModuleUrl('ddoevisualcms', 'out/src/js/backend.min.js') }}"></script>

{% include "@ddoevisualcms/admin/ddoevisualcmsadmin_ui.html.twig" with {title: "DD_VISUAL_EDITOR"|translate, icon: oViewConf.getModuleUrl('ddoevisualcms', 'out/src/img/module_icon_light.svg')} %}