{#
/*
 * Xibo - Digital Signage - http://www.xibo.org.uk
 * Copyright (C) 2012-2016 Spring Signage Ltd - http://www.springsignage.com
 *
 * This file is part of Xibo.
 *
 * Xibo is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.
 *
 * Xibo is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with Xibo.  If not, see <http://www.gnu.org/licenses/>.
 */
#}

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

{% block formTitle %}
    {% trans "Edit Clock" %}
{% endblock %}

{% block formHtml %}
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#generalTab" role="tab" data-toggle="tab"><span>{% trans "General" %}</span></a></li>
            <li><a href="#appearanceTab" role="tab" data-toggle="tab"><span>{% trans "Appearance" %}</span></a></li>
            <li><a href="#editorTab" class="digital-control-group" role="tab" data-toggle="tab"><span>{% trans "Editor" %}</span></a></li>
        </ul>
        <div class="col-md-12">
            <form id="clockFormEdit" 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="generalTab">
                        {% 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 "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="appearanceTab">
                        {% set title %}{% trans "Clock Type" %}{% endset %}
                        {% set helpText %}{% trans "Please select the type of clock to display." %}{% endset %}
                        {% set analog %}{% trans "Analog" %}{% endset %}
                        {% set digital %}{% trans "Digital" %}{% endset %}
                        {% set flip %}{% trans "Flip Clock" %}{% endset %}
                        {% set options = [
                            { id: 1, value: analog },
                            { id: 2, value: digital },
                            { id: 3, value: flip },
                        ] %}
                        {{ forms.dropdown("clockTypeId", "single", title, module.getOption("clockTypeId"), options, "id", "value", helpText) }}

                        {% set title %}{% trans "Clock Face" %}{% endset %}
                        {% set helpText %}{% trans "Please select a clock face." %}{% endset %}
                        {{ forms.dropdown("clockFace", "single", title, module.getOption("clockFace", "TwentyFourHourClock"), module.clockFaces(), "id", "value", helpText, "flip-control-group") }}

                        {% set title %}{% trans "Offset" %}{% endset %}
                        {% set helpText %}{% trans "The offset in minutes that should be applied to the current time, or if a counter then date/time to run from in the format Y-m-d H:i:s." %}{% endset %}
                        {{ forms.input("offset", title, module.getOption("offset"), helpText) }}

                        {% set title %}{% trans "Show Seconds?" %}{% endset %}
                        {% set helpText %}{% trans "Should the clock show seconds or not?" %}{% endset %}
                        {{ forms.checkbox("showSeconds", title, module.getOption("showSeconds", 1), helpText, "flip-control-group") }}

                        {% set title %}{% trans "Theme" %}{% endset %}
                        {% set helpText %}{% trans "Please select a theme for the clock." %}{% endset %}
                        {% set light %}{% trans "Light" %}{% endset %}
                        {% set dark %}{% trans "Dark" %}{% endset %}
                        {% set options = [
                        { id: 1, value: light },
                        { id: 2, value: dark }
                        ] %}
                        {{ forms.dropdown("themeId", "single", title, module.getOption("theme"), options, "id", "value", helpText, "analogue-control-group") }}
                    </div>

                    <div class="tab-pane" id="editorTab">
                        <div class="form-content-title container-fluid text-right">
                            <h4 class="col-xs-6 text-left">{% trans "Clock Template" %}</h4>
                            <input type="checkbox" class="col-xs-6 pull-right bootstrap-switch-target" id="ta_text_advanced" name="ta_text_advanced" {% if module.getOption("ta_text_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 message %}{% trans "Enter a format for the Digital Clock e.g. [HH:mm] or [DD/MM/YYYY]. See the manual for more information." %}{% endset %}
                            {{ forms.message(message, "") }}

                            {% set simpleTextEditorMessage %}
                                {% trans "Enter text or HTML in the box below." %}<br>
                            {% endset %}
                            {{ forms.message(simpleTextEditorMessage, 'ta_text-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 ta_text-advanced-editor-show') }}
                        </div>

                        <div class="ckeditor_controls inline-editor-hide container-fluid" data-linked-to="ta_text">
                            <div class="col-sm-offset-4 col-sm-8">
                                <div class="form-group">
                                    <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="ta_text">
                                            <option value=""></option>
                                            <option value="HH:mm">HH:mm</option>
                                            <option value="DD/MM/YYYY">DD/MM/YYYY</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{ forms.textarea("ta_text", "", module.getRawNode("format"), "", "inline-editor-hide", "", 10) }}
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}