<%@ page import="com.agnitas.util.ComHelpUtil" %>
<%@ taglib prefix="mvc" uri="https://emm.agnitas.de/jsp/jsp/spring" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%--@elvariable id="helplanguage" type="java.lang.String"--%>

<script id="mailing-content-entry-template" type="text/x-mustache-template">
    <div id="{{-id}}" class="l-mailing-content-entry" data-action="selectContentEntry">
        <div class="l-name">
            <span>{{-name}}</span>
        </div>
        <div class="l-delete-content-entry" data-action="deleteContentEntry">
            <i class="icon icon-times-circle-o icon-lg"></i>
        </div>
    </div>
</script>

<script id="content-editor-template" type="text/x-mustache-template">
    {{var readonly = isEditableMailing ? '' : 'readonly="readonly"';}}
    {{var disabled = isEditableMailing ? '' : 'disabled="disabled"';}}

    <div id="content_modal"
         class="modal modal-extra-wide"
         data-backdrop="static"
         data-keyboard="false"
         style="font-size: 14px;"
         data-controller="mailing-content-editor-controller"
         data-initializer="mailing-content-editor-initializer">
        <div class="modal-dialog">
            <mvc:form cssClass="modal-fixed-content" data-form="">
                <div class="modal-fixed-header standard-header">
                    <div class="row full-width no-margin">
                        <div class="col-sm-6">
                            <h4 class="modal-title" style="padding-left: 10px">{{-dynTag.name}}</h4>
                        </div>
                        <div class="col-sm-6 horizontal-flex-box full-height no-padding">
                            <div class="biggest-flex-item">
                                <div class="col-sm-4">
                                    <label class="control-label" for="interest_groups">
                                        <mvc:message code="interestgroup"/>
                                        <button class="icon icon-help" data-help="help_${helplanguage}/mailing/content/Interest.xml" tabindex="-1" type="button">
                                        </button>
                                    </label>
                                </div>
                                <div class="col-sm-8">
                                    <select id="interest_groups" class="form-control js-select dropdown-menu">
                                        {{interestGroups.forEach(function(interestGroup){ }}
                                        <option value="{{- interestGroup.column}}"> {{- interestGroup.shortname}}</option>
                                        {{ }); }}
                                    </select>
                                </div>
                            </div>
                            <button type="button" class="full-size-btn"
                                    data-action="createEnlargedContentEditorModal"
                                    data-tooltip="<mvc:message code='editor.enlargeEditor'/>">
                                <i class="icon icon-arrows-alt"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="modal-fixed-body">
                    <div class="row full-height no-margin">
                        <div class="col-sm-4 fixed-content-40-45 mailing-content no-padding">
                            <div class="fixed-header mailing-content-header">
                                <label for="content_area" style="font-size: 14px">
                                    <mvc:message code="mailing.content.order"/>
                                    <button class="icon icon-help" data-help="help_${helplanguage}/mailing/content/Order.xml" tabindex="-1" type="button">
                                    </button>
                                </label>
                            </div>
                            <div id="content_area" class="fixed-body mailing-content-body">
                                <div id="ordered_area" class="droppable-area">
                                    <div class="l-stub well">
                                        <mvc:message code="default.NoEntries"/>
                                    </div>

                                    {{ if (isEditableMailing) { }}
                                    <div class="plus-button-holder">
                                        <i class="icon icon-plus-circle icon-2x plus-button"
                                           data-action="addDynContent"></i>
                                    </div>
                                    {{ } }}
                                </div>
                            </div>

                            {{ if (isEditableMailing) { }}
                            <div class="fixed-footer mailing-content-footer">
                                <div class="col-sm-4">
                                    <label class="control-label" for="target_groups">
                                        <mvc:message code="Target"/>
                                    </label>
                                </div>
                                <div class="col-sm-8">
                                    <select id="target_groups" class="form-control js-select dropdown-menu">
                                        {{targetGroups.forEach(function(targetGroup){ }}
                                        <option value="{{- targetGroup.id}}"> {{- targetGroup.targetName}}</option>
                                        {{ }); }}
                                    </select>
                                </div>
                            </div>
                            {{ } }}
                        </div>
                        <div class="col-sm-8 full-height no-padding" id="editable_area">
                            <div class="fixed-content-40-0 full-height">
                                <div class="fixed-header">
                                    <div class="row no-margin full-height">
                                        <div class="col-sm-8 no-padding">
                                            {{ if (showHTMLEditor || isContentGenerationAllowed) { }}
                                            <ul id="editor_tabs" class="inline-tile-header-nav">
                                                <emm:HideByPermission token="mailing.editor.hide.html">
                                                    <li class="active">
                                                        <a href="#" data-toggle-tab="#tab-content-html" data-action="show-char-counter" style="line-height: 28px;">
                                                            <mvc:message code="HTML"/>
                                                        </a>
                                                    </li>
                                                </emm:HideByPermission>
                                                <emm:HideByPermission token="mailing.editor.hide">
                                                    {{ if (showHTMLEditor) { }}
                                                        <li>
                                                            <a href="#" data-toggle-tab="#tab-content-wysiwyg" data-action="hide-char-counter" style="line-height: 28px;">
                                                                <mvc:message code="mailingContentHTMLEditor"/>
                                                            </a>
                                                        </li>
                                                    {{ } }}

                                                    <jsp:include page="/WEB-INF/jsp/mailing/fragments/ai-text-generation-tab.jsp">
                                                        <jsp:param name="enlargedEditor" value="false" />
                                                    </jsp:include>
                                                </emm:HideByPermission>
                                            </ul>
                                            {{ } }}
                                        </div>
                                    </div>
                                </div>
                                <div class="fixed-body">
                                    <emm:ShowByPermission token="mailing.editor.hide">
                                        <emm:HideByPermission token="mailing.editor.hide.html">
                                            <div id="tab-content-html" class="{{- showHTMLEditor ? 'hidden' : ''}} full-height" data-tab-show="true">
                                                <div id="contentEditor" class="form-control" {{- readonly }}></div>
                                                <textarea id="content" data-action="count-textarea-chars" class="form-control js-editor" {{- readonly }}></textarea>
                                            </div>
                                        </emm:HideByPermission>
                                    </emm:ShowByPermission>
                                    <emm:HideByPermission token="mailing.editor.hide">
                                        <div id="tab-content-html" class="{{- showHTMLEditor ? 'hidden' : ''}} full-height">
                                            <div id="contentEditor" class="form-control" {{- readonly }}></div>
                                        </div>
                                        <div id="tab-content-wysiwyg" class="{{- showHTMLEditor ? '' : 'hidden'}} full-height">
                                            <textarea id="content"
                                                      name="content"
                                                      class="form-control js-editor js-wysiwyg full-height"
                                                      data-action="count-textarea-chars"
                                                      data-editor-options="isFullHtml: {{- isFullHtmlTags }}, browseMailingId: ${mailingId}"
                                                      {{- readonly }}></textarea>
                                        </div>

                                        <jsp:include page="/WEB-INF/jsp/mailing/fragments/ai-text-generation-tab-content.jsp" flush="true">
                                            <jsp:param name="enlargedEditor" value="false"/>
                                        </jsp:include>
                                    </emm:HideByPermission>
                                    <div class="modal-char-counter" data-char-counter-for="content">
                                        <span class="small status">&nbsp;</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-fixed-footer standard-footer">
                    <div class="btn-group">
                        <button type="button"
                                class="btn btn-default btn-large js-confirm-negative"
                                data-dismiss="modal">
                            <i class="icon icon-times"></i>
                            <span class="text"><mvc:message code="button.Cancel"/></span>
                        </button>
                        {{ if (isEditableMailing) { }}
                        <button type="button"
                                class="btn btn-primary btn-large"
                                data-action="saveDynTag">
                            <i class="icon icon-save"></i>
                            <span class="text"><mvc:message code="button.Save"/></span>
                        </button>
                        {{ } }}
                    </div>
                </div>
            </mvc:form>
        </div>
    </div>
</script>

<%@include file="ai-text-generation-apply.jspf" %>
