{#
/**
 * Copyright (C) 2022 Xibo Signage Ltd
 *
 * Xibo - Digital Signage - http://www.xibo.org.uk
 *
 * 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/>.
 */
#}
{% import "forms.twig" as forms %}

{% block formHtml %}
<div class="row">
    <div class="col-md-12">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"><a class="nav-link active" href="#general" role="tab" data-toggle="tab">{% trans "General" %}</a></li>
            <li class="nav-item"><a class="nav-link" href="#timers" role="tab" data-toggle="tab">{% trans "On/Off Timers" %}</a></li>
            <li class="nav-item"><a class="nav-link" href="#pictureOptions" role="tab" data-toggle="tab">{% trans "Picture Settings" %}</a></li>
            <li class="nav-item"><a class="nav-link" href="#lockOptions" role="tab" data-toggle="tab">{% trans "Lock Settings" %}</a></li>
            <li class="nav-item"><a class="nav-link" href="#advanced" role="tab" data-toggle="tab">{% trans "Advanced" %}</a></li>
            {% if commands|length > 0 %}
                <li class="nav-item"><a class="nav-link" href="#commands" role="tab" data-toggle="tab">{% trans "Commands" %}</a></li>
            {% endif %}
        </ul>
        <form id="displayProfileForm" class="XiboForm form-horizontal" method="put" action="{{ url_for("displayProfile.edit", {id: displayProfile.displayProfileId}) }}">
            <div class="tab-content">
                <div class="tab-pane active" id="general">
                    {% include "displayprofile-form-edit-common-fields.twig" %}

                    {% set title = "Licence Code"|trans %}
                    {% set helpText = "Provide the Licence Code (formerly Licence email address) to license Players using this Display Profile."|trans %}
                    {{ forms.email("emailAddress", title, displayProfile.getSetting("emailAddress"), helpText) }}

                    {% set title = "Collect interval"|trans %}
                    {% set helpText = "How often should the Player check for new content."|trans %}
                    {% set options = [
                        { id: 60, value: "1 minute"|trans },
                        { id: 300, value: "5 minutes"|trans },
                        { id: 600, value: "10 minutes"|trans },
                        { id: 1800, value: "30 minutes"|trans },
                        { id: 3600, value: "1 hour"|trans },
                        { id: 5400, value: "1 hour 30 minutes"|trans },
                        { id: 7200, value: "2 hours"|trans },
                        { id: 9000, value: "2 hours 30 minutes"|trans },
                        { id: 10800, value: "3 hours"|trans },
                        { id: 12600, value: "3 hours 30 minutes"|trans },
                        { id: 14400, value: "4 hours"|trans },
                        { id: 18000, value: "5 hours"|trans },
                        { id: 21600, value: "6 hours"|trans },
                        { id: 25200, value: "7 hours"|trans },
                        { id: 28800, value: "8 hours"|trans },
                        { id: 32400, value: "9 hours"|trans },
                        { id: 36000, value: "10 hours"|trans },
                        { id: 39600, value: "11 hours"|trans },
                        { id: 43200, value: "12 hours"|trans },
                        { id: 86400, value: "24 hours"|trans }
                    ] %}
                    {{ forms.dropdown("collectInterval", "single", title, displayProfile.getSetting("collectInterval"), options, "id", "value", helpText) }}

                    {% set title = "XMR Public Address"|trans %}
                    {% set helpText = "Please enter the public address for XMR."|trans %}
                    {{ forms.input("xmrNetworkAddress", title, displayProfile.getSetting("xmrNetworkAddress"), helpText) }}

                    {% set title = "Enable stats reporting?"|trans %}
                    {% set helpText = "Should the application send proof of play stats to the CMS."|trans %}
                    {{ forms.checkbox("statsEnabled", title, displayProfile.getSetting("statsEnabled"), helpText) }}

                    {% set title = "Aggregation level"|trans %}
                    {% set helpText = "Set the level of collection for Proof of Play Statistics to be applied to selected Layouts / Media and Widget items."|trans %}
                    {% set options = [
                        { id: 'Individual', value: "Individual"|trans },
                        { id: 'Hourly', value: "Hourly"|trans },
                        { id: 'Daily', value: "Daily"|trans },
                    ] %}
                    {{ forms.dropdown("aggregationLevel", "single", title, displayProfile.getSetting("aggregationLevel"), options, "id", "value", helpText, "aggregation-level") }}

                    {% set title = "Player Version"|trans %}
                    {% set helpText = "Set the Player Version to install, making sure that the selected version is suitable for your device"|trans %}
                    {% if displayProfile.type == "lg" %}
                        {% set attributes = [
                            { name: "data-width", value: "300px" },
                            { name: "data-allow-clear", value: "true" },
                            { name: "data-placeholder--id", value: null },
                            { name: "data-placeholder--value", value: "" },
                            { name: "data-search-url", value: url_for("playersoftware.search") },
                            { name: "data-search-term", value: "playerShowVersion" },
                            { name: "data-id-property", value: "versionId" },
                            { name: "data-text-property", value: "playerShowVersion" },
                            { name: "data-filter-options", value: '{"playerType":"lg"}' }
                        ] %}
                    {% endif %}
                    {% if displayProfile.type == "sssp" %}
                        {% set attributes = [
                            { name: "data-width", value: "300px" },
                            { name: "data-allow-clear", value: "true" },
                            { name: "data-placeholder--id", value: null },
                            { name: "data-placeholder--value", value: "" },
                            { name: "data-search-url", value: url_for("playersoftware.search") },
                            { name: "data-search-term", value: "playerShowVersion" },
                            { name: "data-id-property", value: "versionId" },
                            { name: "data-text-property", value: "playerShowVersion" },
                            { name: "data-filter-options", value: '{"playerType":"sssp"}' }
                        ] %}
                    {% endif %}
                    {{ forms.dropdown("versionMediaId", "single", title, displayProfile.getSetting("versionMediaId"), [{versionId:null, playerShowVersion:""}]|merge(versions), "versionId", "playerShowVersion", helpText, "pagedSelect", "", "", "", attributes) }}

                    {% set title = "Orientation"|trans %}
                    {% set helpText = "Set the orientation of the device (portrait mode will only work if supported by the hardware) Application Restart Required."|trans %}
                    {% set options = [
                        { id: 0, value: "Landscape"|trans },
                        { id: 1, value: "Portrait"|trans },
                        { id: 8, value: "Reverse Landscape"|trans },
                        { id: 9, value: "Reverse Portrait"|trans }
                    ] %}
                    {{ forms.dropdown("orientation", "single", title, displayProfile.getSetting("orientation"), options, "id", "value", helpText) }}

                    {% set title = "Download Window Start Time"|trans %}
                    {% set helpText = "The start of the time window to connect to the CMS and download updates."|trans %}
                    {{ forms.time("downloadStartWindow", title, displayProfile.getSetting("downloadStartWindow"), helpText, "", "", "","HH:mm") }}

                    {% set title = "Download Window End Time"|trans %}
                    {% set helpText = "The end of the time window to connect to the CMS and download updates."|trans %}
                    {{ forms.time("downloadEndWindow", title, displayProfile.getSetting("downloadEndWindow"), helpText, "", "", "","HH:mm") }}

                    {% set title = "Update Window Start Time"|trans %}
                    {% set helpText = "The start of the time window to install application updates."|trans %}
                    {{ forms.time("updateStartWindow", title, displayProfile.getSetting("updateStartWindow"), helpText, "", "", "","HH:mm") }}

                    {% set title = "Update Window End Time"|trans %}
                    {% set helpText = "The end of the time window to install application updates."|trans %}
                    {{ forms.time("updateEndWindow", title, displayProfile.getSetting("updateEndWindow"), helpText, "", "", "","HH:mm") }}

                    {% set title = "Force HTTPS?"|trans %}
                    {% set helpText = "Should Displays be forced to use HTTPS connection to the CMS?"|trans %}
                    {{ forms.checkbox("forceHttps", title, displayProfile.getSetting("forceHttps"), helpText) }}

                    {% set title = "Operating Hours"|trans %}
                    {% set helpText = "Select a day part that should act as operating hours for this display - email alerts will not be sent outside of operating hours"|trans %}
                    {% set attributes = [
                        { name: "data-width", value: "300px" },
                        { name: "data-allow-clear", value: "true" },
                        { name: "data-placeholder--id", value: null },
                        { name: "data-placeholder--value", value: "" },
                        { name: "data-search-url", value: url_for("daypart.search") },
                        { name: "data-search-term", value: "name" },
                        { name: "data-id-property", value: "dayPartId" },
                        { name: "data-text-property", value: "name" },
                        { name: "data-filter-options", value: '{"isAlways":"0", "isCustom":"0"}' }
                    ] %}
                    {{ forms.dropdown("dayPartId", "single", title, displayProfile.getSetting("dayPartId"), [{dayPartId:null, name:""}]|merge(dayParts), "dayPartId", "name", helpText, "pagedSelect", "", "", "", attributes) }}

                </div>

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

                    {% set title = "Log Level"|trans %}
                    {% set helpText = "The logging level that should be recorded by the Player."|trans %}
                    {% set options = [
                        { id: 'audit', value: "Audit"|trans },
                        { id: 'error', value: "Error"|trans },
                        { id: 'off', value: "Off"|trans }
                    ] %}
                    {{ forms.dropdown("logLevel", "single", title, displayProfile.getSetting("logLevel"), options, "id", "value", helpText) }}

                    {% set title = "Action Bar Mode"|trans %}
                    {% set helpText = "How should the action bar behave?"|trans %}
                    {% set options = [
                        { id: 0, value: "Hide"|trans },
                        { id: 1, value: "Timed"|trans }
                    ] %}
                    {{ forms.dropdown("actionBarMode", "single", title, displayProfile.getSetting("actionBarMode"), options, "id", "value", helpText) }}

                    {% set title = "Action Bar Display Duration"|trans %}
                    {% set helpText = "How long should the Action Bar be shown for, in seconds?"|trans %}
                    {{ forms.number("actionBarDisplayDuration", title, displayProfile.getSetting("actionBarDisplayDuration"), helpText) }}

                    {% if theme.getSetting('DISPLAY_PROFILE_CURRENT_LAYOUT_STATUS_ENABLED', 0) == 1 %}
                        {% set title = "Notify current layout"|trans %}
                        {% set helpText = "When enabled the Player will send the current layout to the CMS each time it changes. Warning: This is bandwidth intensive and should be disabled unless on a LAN."|trans %}
                        {{ forms.checkbox("sendCurrentLayoutAsStatusUpdate", title, displayProfile.getSetting("sendCurrentLayoutAsStatusUpdate"), helpText) }}
                    {% endif %}

                    {% if theme.getSetting('DISPLAY_PROFILE_SCREENSHOT_INTERVAL_ENABLED', 0) == 1 %}
                        {% set title %}
                            {% trans "Screen shot interval"%}
                            {{ forms.playerCompat("", "", "R204+", "R208+", "") }}
                        {% endset %}
                        {% set helpText = "The duration between status screen shots in minutes. 0 to disable. Warning: This is bandwidth intensive."|trans %}
                        {{ forms.number("screenShotRequestInterval", title, displayProfile.getSetting("screenShotRequestInterval"), helpText) }}
                    {% endif %}

                    {% set title = "Screen Shot Size"|trans %}
                    {% set helpText = "The size of the screenshot to return when requested."|trans %}
                    {% if displayProfile.type == "lg" %}
                    {% set options = [
                        { id: 1, value: "Thumbnail"|trans },
                        { id: 2, value: "HD"|trans },
                        { id: 3, value: "FHD"|trans }
                    ] %}
                    {% else %}
                        {% set options = [
                            { id: 1, value: "Thumbnail"|trans },
                            { id: 2, value: "Standard"|trans }
                        ] %}
                    {% endif %}
                    {{ forms.dropdown("screenShotSize", "single", title, displayProfile.getSetting("screenShotSize"), options, "id", "value", helpText) }}

                    {% set title = "Send progress while downloading"|trans %}
                    {% set helpText = "How often, in minutes, should the Display send its download progress while it is downloading new content?"|trans %}
                    {{ forms.number("mediaInventoryTimer", title, displayProfile.getSetting("mediaInventoryTimer"), helpText) }}

                    {% set title = "Embedded Web Server Port"|trans %}
                    {% set helpText = "The port number to use for the embedded web server on the Player. Only change this if there is a port conflict reported on the status screen."|trans %}
                    {{ forms.number("serverPort", title, displayProfile.getSetting("serverPort"), helpText) }}

                    {% set title = "Embedded Web Server allow WAN?"|trans %}
                    {% set helpText = "Should we allow access to the Player Embedded Web Server from WAN? You may need to adjust the device firewall to allow external traffic"|trans %}
                    {{ forms.checkbox("embeddedServerAllowWan", title, displayProfile.getSetting("embeddedServerAllowWan"), helpText) }}
                </div>

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

                    {% set settingsDesc1 %}
                        {% trans "Use the form fields to create On/Off timings for the monitor for specific days of the week as required." %}
                    {% endset %}
                    {% set settingsDesc2 %}
                        {% trans "Please note:" %}
                    {% endset %}
                    {% set settingsDesc3 %}
                        {% trans "When the monitor is 'Off' it will not be able to receive content updates. With the next timed 'On' the monitor will connect to the CMS and get content/schedule updates." %}
                    {% endset %}
                    <div class="alert alert-info">
                        <p>{{ settingsDesc1 }}<strong>{{ settingsDesc2 }}</strong>{{ settingsDesc3 }}</p>
                    </div>

                    {# Days translations #}
                    {% set monday %}{% trans "Monday" %}{% endset %}
                    {% set tuesday %}{% trans "Tuesday" %}{% endset %}
                    {% set wednesday %}{% trans "Wednesday" %}{% endset %}
                    {% set thursday %}{% trans "Thursday" %}{% endset %}
                    {% set friday %}{% trans "Friday" %}{% endset %}
                    {% set saturday %}{% trans "Saturday" %}{% endset %}
                    {% set sunday %}{% trans "Sunday" %}{% endset %}

                    {% set options = [
                        { id: "monday", name: monday },
                        { id: "tuesday", name: tuesday },
                        { id: "wednesday", name: wednesday },
                        { id: "thursday", name: thursday },
                        { id: "friday", name: friday },
                        { id: "saturday", name: saturday },
                        { id: "sunday", name: sunday }
                    ] %}

                    <div id="timers-container" class="container-fluid display-settings-container" data-values="{{ displayProfile.getSetting("timers") }}" data-options="{{ options|json_encode() }}"></div>

                </div>

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

                    {% set settingsDesc %}
                        {% trans "Control picture settings using the fields below. Use the sliders to set the required range for each setting." %}
                    {% endset %}
                    <div class="alert alert-info">
                        <p>{{ settingsDesc }}</p>
                    </div>

                    {# Properties names translations #}
                    {% set backlight %}{% trans "Backlight" %}{% endset %}
                    {% set contrast %}{% trans "Contrast" %}{% endset %}
                    {% set brightness %}{% trans "Brightness" %}{% endset %}
                    {% set sharpness %}{% trans "Sharpness" %}{% endset %}
                    {% set hSharpness %}{% trans "Horizontal Sharpness" %}{% endset %}
                    {% set vSharpness %}{% trans "Vertical Sharpness" %}{% endset %}
                    {% set color %}{% trans "Color" %}{% endset %}
                    {% set tint %}{% trans "Tint" %}{% endset %}
                    {% set colorTemperature %}{% trans "Color Temperature" %}{% endset %}
                    {% set dynamicContrast %}{% trans "Dynamic Contrast" %}{% endset %}
                    {% set superResolution %}{% trans "Super Resolution" %}{% endset %}
                    {% set colorGamut %}{% trans "Color Gamut" %}{% endset %}
                    {% set dynamicColor %}{% trans "Dynamic Color" %}{% endset %}
                    {% set noiseReduction %}{% trans "Noise Reduction" %}{% endset %}
                    {% set mpegNoiseReduction %}{% trans "MPEG Noise Reduction" %}{% endset %}
                    {% set blackLevel %}{% trans "Black Level" %}{% endset %}
                    {% set gamma %}{% trans "Gamma" %}{% endset %}

                    {# Labels translations #}
                    {% set red %}{% trans "Red" %}{% endset %}
                    {% set green %}{% trans "Green" %}{% endset %}
                    {% set warm %}{% trans "Warm" %}{% endset %}
                    {% set cool %}{% trans "Cool" %}{% endset %}

                    {% set options = {
                        backlight: { name: backlight, type: "number", inputType: "slider", sliderOptions: { min: 0, max: 100, step: 1, ticks: [0, 100], ticks_labels: [0, 100] }},
                        contrast: { name: contrast, type: "number", inputType: "slider", sliderOptions: { min: 0, max: 100, step: 1, ticks: [0, 100], ticks_labels: [0, 100] }},
                        brightness: { name: brightness, type: "number", inputType: "slider", sliderOptions: { min: 0, max: 100, step: 1, ticks: [0, 100], ticks_labels: [0, 100] }},
                        sharpness: { name: sharpness, type: "number", inputType: "slider", sliderOptions: { min: 0, max: 50, step: 1, ticks: [0, 50], ticks_labels: [0, 50] }},
                        hSharpness: { name: hSharpness, type: "number", inputType: "slider", sliderOptions: { min: 0, max: 50, step: 1, ticks: [0, 50], ticks_labels: [0, 50] }},
                        vSharpness: { name: vSharpness, type: "number", inputType: "slider", sliderOptions: { min: 0, max: 50, step: 1, ticks: [0, 50], ticks_labels: [0, 50] }},
                        color: { name: color, type: "number", inputType: "slider", sliderOptions: { min: 0, max: 100, step: 1, ticks: [0, 100], ticks_labels: [0, 100] }},
                        tint: { name: tint, type: "number", inputType: "slider", sliderOptions: { min: 0, max: 100, step: 1, ticks: [0, 100], ticks_labels: [red, green] }},
                        colorTemperature: { name: colorTemperature, type: "number", inputType: "slider", sliderOptions: { min: 0, max: 100, step: 1, ticks: [0, 100], ticks_labels: [warm, cool] }},
                        dynamicContrast: { name: dynamicContrast, type: "string", inputType: "slider", sliderOptions: { min: 0, max: 3, step: 1, ticks: [0, 1, 2, 3], ticks_labels: ["off", "low", "medium", "high"], tooltip: "hide" }},
                        superResolution: { name: superResolution, type: "string", inputType: "slider", sliderOptions: { min: 0, max: 3, step: 1, ticks: [0, 1, 2, 3], ticks_labels: ["off", "low", "medium", "high"], tooltip: "hide" }},
                        colorGamut: { name: colorGamut, type: "string", inputType: "slider", sliderOptions: { min: 0, max: 1, step: 1, ticks: [0, 1], ticks_labels: ["normal", "extended"], tooltip: "hide" }},
                        dynamicColor: { name: dynamicColor, type: "string", inputType: "slider", sliderOptions: { min: 0, max: 3, step: 1, ticks: [0, 1, 2, 3], ticks_labels: ["off", "low", "medium", "high"], tooltip: "hide" }},
                        noiseReduction: { name: noiseReduction, type: "string", inputType: "slider", sliderOptions: { min: 0, max: 4, step: 1, ticks: [0, 1, 2, 3, 4], ticks_labels: ["auto", "off", "low", "medium", "high"], tooltip: "hide" }},
                        mpegNoiseReduction: { name: mpegNoiseReduction, type: "string", inputType: "slider", sliderOptions: { min: 0, max: 4, step: 1, ticks: [0, 1, 2, 3, 4], ticks_labels: ["auto", "off", "low", "medium", "high"], tooltip: "hide" }},
                        blackLevel: { name: blackLevel, type: "string", inputType: "slider", sliderOptions: { min: 0, max: 1, step: 1, ticks: [0, 1], ticks_labels: ["low", "high"], tooltip: "hide" }},
                        gamma: { name: gamma, type: "string", inputType: "slider", sliderOptions: { min: 0, max: 3, step: 1, ticks: [0, 1, 2, 3], ticks_labels: ["low", "medium", "high", "high2"], tooltip: "hide" }}
                    } %}

                    <div id="picture-options-container" class="container-fluid display-settings-container" data-values="{{ displayProfile.getSetting("pictureOptions") }}" data-options="{{ options|json_encode() }}"></div>

                </div>

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

                    <div id="lock-options-container" class="container-fluid display-settings-container" data-value="{{ displayProfile.getSetting("lockOptions") }}">
                        {# usblock and osdlock #}
                        {% set usblockTitle %}{% trans "usblock" %}{% endset %}
                        {% set usblockHelp %}{% trans "Set access to any device that uses the monitors USB port. Set to ‘False’ the monitor will not accept input or read from USB ports." %}{% endset %}
                        {% set osdlockTitle %}{% trans "osdlock" %}{% endset %}
                        {% set osdlockHelp %}{% trans "Set access to the monitor settings via the remote control. Set To ‘False’ the remote control will not change the volume, brightness etc of the monitor." %}{% endset %}
                        {% set falseText %}{% trans "False" %}{% endset %}
                        {% set trueText %}{% trans "True" %}{% endset %}
                        {% set options = [
                            { val: 'empty', text: '' },
                            { val: 'false', text: falseText },
                            { val: 'true', text: trueText }
                        ] %}

                        {% if lockOptions.usblock is defined and lockOptions.usblock is not null and displayProfile.type == "lg" %}
                            {% if lockOptions.usblock == true  %}
                                {% set usblockValue = 'true' %}
                            {% else %}
                                {% set usblockValue = 'false' %}
                            {% endif %}
                        {% else %}
                            {% set usblockValue = 'empty' %}
                        {% endif %}

                        {% if lockOptions.osdlock is defined and lockOptions.osdlock is not null %}
                            {% if lockOptions.osdlock == true  %}
                                {% set osdlockValue = 'true' %}
                            {% else %}
                                {% set osdlockValue = 'false' %}
                            {% endif %}
                        {% else %}
                            {% set osdlockValue = 'empty' %}
                        {% endif %}

                        {% if displayProfile.type == "lg" %}
                            {{ forms.dropdown("usblock", "single", usblockTitle, usblockValue, options, "val", "text", usblockHelp) }}
                        {% endif %}

                        {{ forms.dropdown("osdlock", "single", osdlockTitle, osdlockValue, options, "val", "text", osdlockHelp) }}

                        {# keylock (local and remote) #}
                        {% set localKeylockTitle %}{% trans "Keylock (local)" %}{% endset %}
                        {% set localKeylockHelp %}{% trans "Set the allowed key input for the monitor." %}{% endset %}
                        {% set remoteKeylockTitle %}{% trans "Keylock (remote)" %}{% endset %}
                        {% set remoteKeylockHelp %}{% trans "Set the allowed key input for the monitor." %}{% endset %}
                        {% set allowallText %}{% trans "Allow All" %}{% endset %}
                        {% set blockallText %}{% trans "Block All" %}{% endset %}
                        {% set poweronlyText %}{% trans "Power Only" %}{% endset %}
                        {% set options = [
                            { val: "", text: "" },
                            { val: "allowall", text: allowallText },
                            { val: "blockall", text: blockallText }
                        ] %}
                        {% if displayProfile.type == "lg" %}
                            {% set options = options|merge([{ val: "poweronly", text: poweronlyText }], options) %}
                        {% endif %}
                        {{ forms.dropdown("keylockLocal", "single", localKeylockTitle, lockOptions.keylock.local, options, "val", "text", localKeylockHelp) }}
                        {{ forms.dropdown("keylockRemote", "single", remoteKeylockTitle, lockOptions.keylock.remote, options, "val", "text", remoteKeylockHelp) }}
                    </div>

                </div>

                {% if commands|length > 0 %}
                    <div class="tab-pane" id="commands">
                        {% include "displayprofile-form-edit-command-fields.twig" %}
                    </div>
                {% endif %}
            </div>
        </form>
    </div>
</div>
{% endblock %}