{#
/*
 * Spring Signage Ltd - http://www.springsignage.com
 * Copyright (C) 2017 Spring Signage Ltd
 * (${FILE_NAME})
 */
#}

{% extends "form-base.twig" %}
{% import "forms.twig" as forms %}

{% block formTitle %}
    {% trans "Edit Notification Widget" %}
{% endblock %}

{% block formHtml %}
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#general" role="tab" data-toggle="tab"><span>{% trans "General" %}</span></a></li>
            <li><a href="#configurationTab" role="tab" data-toggle="tab"><span>{% trans "Configuration" %}</span></a></li>
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                    {% trans "Templates" %}<span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#templateTab" role="tab" data-toggle="tab"><span>{% trans "Main" %}</span></a></li>
                    <li><a href="#noDataTemplateTab" role="tab" data-toggle="tab"><span>{% trans "No Data" %}</span></a></li>
                    <li><a href="#optionalStylesheetTab" role="tab" data-toggle="tab"><span>{% trans "Optional Stylesheet" %}</span></a></li>
                </ul>
            </li>
        </ul>
        <div class="col-md-12">
            <form id="notificationForm" class="XiboForm form-horizontal" method="put" action="{{ urlFor("module.widget.edit", {id: module.widget.widgetId}) }}">
                <div class="tab-content">
                    <div class="tab-pane active" id="general">
                        {% set title %}{% trans "Name" %}{% endset %}
                        {% set helpText %}{% trans "An optional name for this widget" %}{% endset %}
                        {{ forms.input("name", title, module.getOption("name"), helpText) }}

                        {% set title %}{% trans "Set a duration?" %}{% endset %}
                        {% set helpText %}{% trans "Select to provide a specific duration for this Widget" %}{% endset %}
                        {{ forms.checkbox("useDuration", title, module.getUseDuration(), helpText) }}

                        {% set title %}{% trans "Duration" %}{% endset %}
                        {% set helpText %}{% trans "The duration in seconds this should be displayed" %}{% endset %}
                        {{ forms.number("duration", title, module.getDuration(), helpText, "duration-fields", "required") }}

                        {% set title %}{% trans "Duration is per item" %}{% endset %}
                        {% set helpText %}{% trans "The duration specified is per item otherwise it is per feed." %}{% endset %}
                        {{ forms.checkbox("durationIsPerItem", title, module.getOption("durationIsPerItem"), helpText) }}

                        {% set title %}{% trans "Enable Stats Collection?" %}{% endset %}
                        {% set helpText %}{% trans "Enable the collection of Proof of Play statistics for this Widget. Ensure that ‘Enable Stats Collection’ is set to ‘On’ in the Display Settings." %}{% endset %}

                        {% set offOption %}{% trans "Off" %}{% endset %}
                        {% set onOption %}{% trans "On" %}{% endset %}
                        {% set inheritOption %}{% trans "Inherit" %}{% endset %}
                        {% set options = [
                            { id: "Off", value: offOption },
                            { id: "On", value: onOption },
                            { id: "Inherit", value: inheritOption }
                        ] %}
                        {{ forms.dropdown("enableStat", "single", title, module.getOption("enableStat", theme.getSetting("WIDGET_STATS_ENABLED_DEFAULT")), options, "id", "value", helpText) }}
                    </div>

                    <div class="tab-pane" id="configurationTab">

                        {% set title %}{% trans "Age" %}{% endset %}
                        {% set helpText %}{% trans "What is the maximum notification age in minutes, 0 for no restrictions." %}{% endset %}
                        {{ forms.number("age", title, module.getOption("age"), helpText, "", "required") }}

                        {% set title %}{% trans "Effect" %}{% endset %}
                        {% set helpText %}{% trans "Please select the effect that will be used to transition between items." %}{% endset %}
                        {% set noneOption %}{% trans "None" %}{% endset %}
                        {% set fade %}{% trans "Fade" %}{% endset %}
                        {% set fadeout %}{% trans "Fade Out" %}{% endset %}
                        {% set scrollHorz %}{% trans "Scroll Horizontal" %}{% endset %}
                        {% set scrollVert %}{% trans "Scroll Vertical" %}{% endset %}
                        {% set flipHorz %}{% trans "Flip Horizontal" %}{% endset %}
                        {% set flipVert %}{% trans "Flip Vertical" %}{% endset %}
                        {% set shuffle %}{% trans "Shuffle" %}{% endset %}
                        {% set tileSlide %}{% trans "Tile Slide" %}{% endset %}
                        {% set tileBlind %}{% trans "Tile Blind" %}{% endset %}
                        {% set marqueeLeft %}{% trans "Marquee Left" %}{% endset %}
                        {% set marqueeRight %}{% trans "Marquee Right" %}{% endset %}
                        {% set marqueeUp %}{% trans "Marquee Up" %}{% endset %}
                        {% set marqueeDown %}{% trans "Marquee Down" %}{% endset %}
                        {% set options = [
                        { effectid: "none", effect: noneOption },
                        { effectid: "fade", effect: fade },
                        { effectid: "fadeout", effect: fadeout},
                        { effectid: "scrollHorz", effect: scrollHorz},
                        { effectid: "scrollVert", effect: scrollVert},
                        { effectid: "flipHorz", effect: flipHorz},
                        { effectid: "flipVert", effect: flipVert},
                        { effectid: "shuffle", effect: shuffle},
                        { effectid: "tileSlide", effect: tileSlide},
                        { effectid: "tileBlind", effect: tileBlind},
                        { effectid: "marqueeLeft", effect: marqueeLeft},
                        { effectid: "marqueeRight", effect: marqueeRight},
                        { effectid: "marqueeUp", effect: marqueeUp},
                        { effectid: "marqueeDown", effect: marqueeDown}
                        ] %}
                        {{ forms.dropdown("effect", "single", title, module.getOption("effect"), options, "effectid", "effect", helpText) }}

                        {% set title %}{% trans "Speed" %}{% endset %}
                        {% set helpText %}{% trans "The transition speed of the selected effect in milliseconds (normal = 1000) or the Marquee Speed in a low to high scale (normal = 1)." %}{% endset %}
                        {{ forms.number("speed", title, module.getOption("speed"), helpText, "effect-controls") }}
                    </div>

                    <div class="tab-pane" id="templateTab">
                    
                        <div class="form-content-title container-fluid text-right">
                            <h4 class="col-xs-6 text-left">{% trans "Main Template" %}</h4>
                            <input type="checkbox" class="col-xs-6 pull-right bootstrap-switch-target" id="template_advanced" name="template_advanced" {% if module.getOption("template_advanced", 0) == 1 %}checked{% endif %} 
                                data-size="small" 
                                data-label-text="{% trans "Visual editor" %}" 
                                data-label-width="80px" 
                                data-on-text="{% trans "On" %}" 
                                data-off-text="{% trans "Off" %}">
                        </div>

                        

                        <div class="editor-messages">

                            {% set templateMessage %}
                                {% trans "The template for formatting your notifications. Enter [Subject] and [Body] with your desired formatting." %}
                            {% endset %}
                            {{ forms.message(templateMessage, '') }}

                            {% set simpleTextEditorMessage %}
                                {% trans "Enter text or HTML in the box below." %}<br>
                            {% endset %}
                            {{ forms.message(simpleTextEditorMessage, 'template-advanced-editor-hide inline-editor-hide') }}

                            {# Layout Designer messages #}
                            {% set layoutDesignerMessage %}
                                {% trans "Enter text to display using the inline editor which can be opened by clicking in the preview on the left." %}
                                {% trans "When using the inline editor Shift+Enter will drop a single line. Enter alone starts a new paragraph." %}
                            {% endset %}
                            {{ forms.message(layoutDesignerMessage, 'layout-designer-message inline-editor-show') }}

                            {# Playlist Editor messages #}
                            {% set playlistEditorMessage %}
                                {% trans "Enter the text to display. The red rectangle reflects the size of the region you are editing." %}
                                {% trans "Shift+Enter will drop a single line. Enter alone starts a new paragraph." %}
                            {% endset %}
                            {{ forms.message(playlistEditorMessage, 'playlist-editor-message template-advanced-editor-show') }}
                        </div>

                        <div class="form-group ckeditor_controls inline-editor-hide" data-linked-to="template">
                            <div class="col-sm-6">
                                <label class="col-sm-4 control-label" for="ckeditor_snippets_select">{% trans "Snippets" %}</label>
                                <div class="col-sm-8 ckeditor_select_container">
                                    <select id="ckeditor_snippets_select" 
                                    class="ckeditor_snippets_select form-control"
                                    data-linked-to="template">
                                        <option value=""></option>
                                        <option value="Subject">Subject</option>
                                        <option value="Body">Body</option>
                                    </select>
                                </div>
                            </div>  
                        </div>  

                        {{ forms.textarea("template", "", module.getRawNode("template"), "", "inline-editor-hide", "", 5) }}
                    </div>

                    <div class="tab-pane" id="noDataTemplateTab">
                        <div class="form-content-title container-fluid text-right">
                            <h4 class="col-xs-6 text-left">{% trans "No Data Template" %}</h4>
                            <input type="checkbox" class="col-xs-6 pull-right bootstrap-switch-target" id="noDataMessage_advanced" name="noDataMessage_advanced" {% if module.getOption("noDataMessage_advanced", 0) == 1 %}checked{% endif %} 
                                data-size="small" 
                                data-label-text="{% trans "Visual editor" %}" 
                                data-label-width="80px" 
                                data-on-text="{% trans "On" %}" 
                                data-off-text="{% trans "Off" %}">
                        </div>

                        {% set noDataMessageMessage1 %}
                            {% trans "Enter text or HTML in the box below." %}<br>
                        {% endset %}
                        {{ forms.message(noDataMessageMessage1, 'noDataMessage-advanced-editor-hide') }}

                        {% set noDataMessageMessage2 %}
                            {% trans "Enter the text to display." %}
                            {% trans "The red rectangle reflects the size of the region you are editing." %}
                            {% trans "Shift+Enter will drop a single line. Enter alone starts a new paragraph." %}
                        {% endset %}
                        {{ forms.message(noDataMessageMessage2, 'noDataMessage-advanced-editor-show') }}

                        {% set helpText %}{% trans "A message to display when there are no notifications to show" %}{% endset %}
                        {{ forms.textarea("noDataMessage", "", module.getRawNode("noDataMessage"), helpText, "", "", 5) }}
                    </div>

                    <div class="tab-pane" id="optionalStylesheetTab">
                        {% set helpText %}{% trans "Custom Style Sheets" %}{% endset %}
                        {{ forms.textarea("embedStyle", "", module.getRawNode('embedStyle'), helpText, "", "", 10) }}
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}