{#
/**
 * Copyright (C) 2020 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/>.
 */
#}
{% extends "form-base.twig" %}
{% import "forms.twig" as forms %}

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

{% block formButtons %}
    {% trans "Cancel" %}, XiboDialogClose()
    {% trans "Save" %}, displayEditFormSubmit()
{% endblock %}

{% block callBack %}displayEditFormOpen{% endblock %}

{% block extra %}{{ display.overrideConfig|json_encode|raw }}{% endblock %}

{% 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"><span>{% trans "General" %}</span></a></li>
                <li class="nav-item"><a class="nav-link" href="#location" role="tab" data-toggle="tab"><span>{% trans "Details" %}</span></a></li>
                <li class="nav-item"><a class="nav-link" href="#reference" role="tab" data-toggle="tab"><span>{% trans "Reference" %}</span></a></li>
                <li class="nav-item"><a class="nav-link" href="#maintenance" role="tab" data-toggle="tab"><span>{% trans "Maintenance" %}</span></a></li>
                {% if not isWolDisabled %}
                <li class="nav-item"><a class="nav-link" href="#wol" role="tab" data-toggle="tab"><span>{% trans "Wake on LAN" %}</span></a></li>
                {% endif %}
                <li class="nav-item"><a class="nav-link" href="#settings" role="tab" data-toggle="tab"><span>{% trans "Settings" %}</span></a></li>
                <li class="nav-item"><a class="nav-link" href="#remote" role="tab" data-toggle="tab"><span>{% trans "Remote" %}</span></a></li>
                <li class="nav-item"><a class="nav-link" href="#advanced" role="tab" data-toggle="tab"><span>{% trans "Advanced" %}</span></a></li>
            </ul>
            <form id="displayEditForm" class="DisplayForm XiboForm form-horizontal" method="put" action="{{ url_for("display.edit", {id: display.displayId}) }}" data-gettag="{{ url_for("tag.getByName") }}">
                <div class="tab-content">
                    <div class="tab-pane active" id="general">
                        {% if currentUser.featureEnabled('folder.view') %}
                        <div class="form-group row">
                            <label class="col-sm-2 control-label">{% trans "Current Folder" %}</label>
                            <div class="col-sm-10" style="padding-top: 7px">
                                <span id="originalFormFolder"></span>
                            </div>
                        </div>

                        <div class="form-group row">
                            <label class="col-sm-2 control-label">{% trans "Move to Selected Folder:" %}</label>
                            <div class="col-sm-10">
                                <button type="button" class="btn btn-info" id="select-folder-button" data-toggle="modal" data-target="#folder-tree-form-modal">{% trans "Select Folder" %}</button>
                                <span id="selectedFormFolder"></span>
                            </div>
                        </div>

                        {{ forms.hidden('folderId', display.folderId) }}
                        {% endif %}

                        {% set title %}{% trans "Display" %}{% endset %}
                        {% if displayLockName %}
                            {% set helpText %}{% trans "The Name of the Display - your administrator has locked this to the device name" %}{% endset %}
                            {{ forms.disabled("display", title, display.display, helpText, "", "required") }}
                        {% else %}
                            {% set helpText %}{% trans "The Name of the Display - (1 - 50 characters)." %}{% endset %}
                            {{ forms.input("display", title, display.display, helpText, "", "required") }}
                        {% endif %}

                        {% set title %}{% trans "Display's Hardware Key" %}{% endset %}
                        {% set helpText %}{% trans "A unique identifier for this display." %}{% endset %}
                        {{ forms.input("license", title, display.license, helpText, "", "required", "", false) }}

                        {% set title %}{% trans "Description" %}{% endset %}
                        {% set helpText %}{% trans "A description - (1 - 254 characters)." %}{% endset %}
                        {{ forms.input("description", title, display.description, helpText) }}

                        {% if currentUser.featureEnabled("tag.tagging") %}
                            {% set title %}{% trans "Tags" %}{% endset %}
                            {% set helpText %}{% trans "Tags for this Display - Comma separated string of Tags or Tag|Value format. If you choose a Tag that has associated values, they will be shown for selection below." %}{% endset %}
                            {{ forms.inputWithTags("tags", title, display.getTagString(), helpText, 'tags-with-value') }}

                            <p id="loadingValues" style="margin-left: 17%"></p>

                            {% set title %}{% trans "Tag value" %}{% endset %}
                            {{ forms.dropdown("tagValue", "single", title, "", options, "key", "value") }}

                            <div id="tagValueContainer">
                                {% set title %}{% trans "Tag value" %}{% endset %}
                                {% set helpText %}{% trans "Please provide the value for this Tag and confirm by pressing enter on your keyboard." %}{% endset %}
                                {{ forms.input("tagValueInput", title, "", helpText) }}
                            </div>

                            <div id="tagValueRequired" class="alert alert-info">
                                <p>{% trans "This tag requires a set value, please select one from the Tag value dropdown or provide Tag value in the dedicated field." %}</p>
                            </div>
                        {% endif %}

                        {% set title %}{% trans "Authorise display?" %}{% endset %}
                        {% set helpText %}{% trans "Use one of the available slots for this display?" %}{% endset %}
                        {% set yes %}{% trans "Yes" %}{% endset %}
                        {% set no %}{% trans "No" %}{% endset %}
                        {% set options = [
                        { licensedid: 1, licensed: yes },
                        { licensedid: 0, licensed: no }
                        ] %}
                        {{ forms.dropdown("licensed", "single", title, display.licensed, options, "licensedid", "licensed", helpText) }}

                        {% set title %}{% trans "Default Layout" %}{% endset %}
                        {% set helpText %}{% trans "Set the Default Layout to use when no other content is scheduled to this Display. This will override the global Default Layout as set in CMS Administrator Settings. If left blank a global Default Layout will be automatically set for this Display." %}{% endset %}
                        {% set attributes = [
                            { name: "data-search-url", value: url_for("layout.search") },
                            { name: "data-search-term", value: "layout" },
                            { name: "data-search-term-tags", value: "tags" },
                            { name: "data-id-property", value: "layoutId" },
                            { name: "data-text-property", value: "layout" },
                            { name: "data-filter-options", value: '{"retired":"0"}' }
                        ] %}
                        {{ forms.dropdown("defaultLayoutId", "single", title, display.defaultLayoutId, layouts, "layoutId", "layout", helpText, "pagedSelect", "", "", "", attributes) }}
                    </div>
                    <div class="tab-pane" id="location">
                        {% set title %}{% trans "Latitude" %}{% endset %}
                        {% set helpText %}{% trans "The Latitude of this display" %}{% endset %}
                        {{ forms.number("latitude", title, display.latitude, helpText) }}

                        {% set title %}{% trans "Longitude" %}{% endset %}
                        {% set helpText %}{% trans "The Longitude of this Display" %}{% endset %}
                        {{ forms.number("longitude", title, display.longitude, helpText) }}

                        {% set attributes = [
                        { name: "data-width", value: "100%" }
                        ] %}
                        {% set title %}{% trans "Timezone" %}{% endset %}
                        {% set helpText %}{% trans "The timezone for this display, or empty to use the CMS timezone" %}{% endset %}
                        {{ forms.dropdown("timeZone", "single", title, display.timeZone, [{id:"", value:""}]|merge(timeZones), "id", "value", helpText, "selectPicker", "", "", "", attributes) }}

                        {{ forms.message("Configure further details for integration with 3rd parties such as DOOH providers:") }}

                        {% set title %}{% trans "Languages" %}{% endset %}
                        {% set helpText %}{% trans "The languages that the audience viewing this Display are likely to understand" %}{% endset %}
                        {{ forms.dropdown("languages[]", "dropdownmulti", title, display.getLanguages(), languages, "id", "value", helpText, "selectPicker") }}

                        {% set title %}{% trans "Display Type" %}{% endset %}
                        {% set helpText %}{% trans "The Type of this Display" %}{% endset %}
                        {{ forms.dropdown("displayTypeId", "single", title, display.displayTypeId, [{displayTypeId:null, displayType:""}]|merge(displayTypes), "displayTypeId", "displayType", helpText) }}

                        {% set title %}{% trans "Venue" %}{% endset %}
                        {% set helpText %}{% trans "The Location/Venue of this display" %}{% endset %}
                        {% set attributes = [
                            { name: "data-width", value: "100%" },
                            { name: "data-search-url", value: url_for("display.venue.search") },
                            { name: "data-allow-clear", value: "true" },
                            { name: "data-placeholder--id", value: null },
                            { name: "data-placeholder--value", value: "" },
                            { name: "data-venue-id", value: display.venueId },
                        ] %}
                        {{ forms.dropdown("venueId", "single", title, "", null, "venueId", "venueName", helpText, "venue-select", "", "", "", attributes) }}

                        {% set title %}{% trans "Address" %}{% endset %}
                        {% set helpText %}{% trans "The Address of this Display" %}{% endset %}
                        {{ forms.input("address", title, display.address, helpText) }}

                        {% set title %}{% trans "Screen size" %}{% endset %}
                        {% set helpText %}{% trans "The Screen size of this Display" %}{% endset %}
                        {{ forms.number("screenSize", title, display.screenSize, helpText) }}

                        {% set title %}{% trans "Is mobile?" %}{% endset %}
                        {% set helpText %}{% trans "Is this display mobile?" %}{% endset %}
                        {{ forms.checkbox("isMobile", title, display.isMobile, helpText) }}

                        {% set title %}{% trans "Is outdoor?" %}{% endset %}
                        {% set helpText %}{% trans "Is your display located outdoors?" %}{% endset %}
                        {{ forms.checkbox("isOutdoor", title, display.isOutdoor, helpText) }}

                        {% set title %}{% trans "Cost per play" %}{% endset %}
                        {% set helpText %}{% trans "The cost per play" %}{% endset %}
                        {{ forms.number("costPerPlay", title, display.costPerPlay, helpText) }}

                        {% set title %}{% trans "Impressions per play" %}{% endset %}
                        {% set helpText %}{% trans "The impressions per play" %}{% endset %}
                        {{ forms.number("impressionsPerPlay", title, display.impressionsPerPlay, helpText) }}
                    </div>
                    <div class="tab-pane" id="reference">
                        {{ forms.message("Add reference fields if needed"|trans) }}

                        {% set title %}{% trans "Reference 1" %}{% endset %}
                        {{ forms.input("ref1", title, display.ref1) }}

                        {% set title %}{% trans "Reference 2" %}{% endset %}
                        {{ forms.input("ref2", title, display.ref2) }}

                        {% set title %}{% trans "Reference 3" %}{% endset %}
                        {{ forms.input("ref3", title, display.ref3) }}

                        {% set title %}{% trans "Reference 4" %}{% endset %}
                        {{ forms.input("ref4", title, display.ref4) }}

                        {% set title %}{% trans "Reference 5" %}{% endset %}
                        {{ forms.input("ref5", title, display.ref5) }}

                        {% set title %}{% trans "Custom ID" %}{% endset %}
                        {{ forms.input("customId", title, display.customId) }}
                    </div>
                    <div class="tab-pane" id="maintenance">

                        {% set title %}{% trans "Email Alerts" %}{% endset %}
                        {% set helpText %}{% trans "Do you want to be notified by email if there is a problem with this display?" %}{% endset %}
                        {% set yes %}{% trans "Yes" %}{% endset %}
                        {% set no %}{% trans "No" %}{% endset %}
                        {% set options = [
                        { id: 0, value: no },
                        { id: 1, value: yes }
                        ] %}
                        {{ forms.dropdown("emailAlert", "single", title, display.emailAlert, options, "id", "value", helpText) }}

                        {% set title %}{% trans "Use the Global Timeout?" %}{% endset %}
                        {% set helpText %}{% trans "Should this display be tested against the global time out or the Player collection interval?" %}{% endset %}
                        {{ forms.checkbox("alertTimeout", title, display.alertTimeout, helpText) }}
                    </div>
                    {% if not isWolDisabled %}
                    <div class="tab-pane" id="wol">

                        {% set title %}{% trans "Enable Wake on LAN" %}{% endset %}
                        {% set helpText %}{% trans "Wake on Lan requires the correct network configuration to route the magic packet to the display PC" %}{% endset %}
                        {{ forms.checkbox("wakeOnLanEnabled", title, display.wakeOnLanEnabled, helpText) }}

                        {% set title %}{% trans "BroadCast Address" %}{% endset %}
                        {% set helpText %}{% trans "The IP address of the remote host\'s broadcast address (or gateway)" %}{% endset %}
                        {{ forms.input("broadCastAddress", title, display.broadCastAddress, helpText) }}

                        {% set title %}{% trans "Wake on LAN SecureOn" %}{% endset %}
                        {% set helpText %}{% trans "Enter a hexadecimal password of a SecureOn enabled Network Interface Card (NIC) of the remote host. Enter a value in this pattern: \'xx-xx-xx-xx-xx-xx\'. Leave the following field empty, if SecureOn is not used (for example, because the NIC of the remote host does not support SecureOn)." %}{% endset %}
                        {{ forms.input("secureOn", title, display.secureOn, helpText) }}

                        {% set title %}{% trans "Wake on LAN Time" %}{% endset %}
                        {% set helpText %}{% trans "The time this display should receive the WOL command, using the 24hr clock - e.g. 19:00. Maintenance must be enabled." %}{% endset %}
                        {{ forms.input("wakeOnLanTime", title, display.wakeOnLanTime, helpText) }}


                        {% set title %}{% trans "Wake on LAN CIDR" %}{% endset %}
                        {% set helpText %}{% trans "Enter a number within the range of 0 to 32 in the following field. Leave the following field empty, if no subnet mask should be used (CIDR = 0). If the remote host\'s broadcast address is unknown: Enter the host name or IP address of the remote host in Broad Cast Address and enter the CIDR subnet mask of the remote host in this field." %}{% endset %}
                        {{ forms.input("cidr", title, display.cidr, helpText) }}
                    </div>
                    {% endif %}
                    <div class="tab-pane" id="settings">
                        {% set title %}{% trans "Settings Profile?" %}{% endset %}
                        {% set helpText %}{% trans "What display profile should this display use? To use the default profile leave this empty." %}{% endset %}
                        {{ forms.dropdown("displayProfileId", "single", title, display.displayProfileId, [{displayProfileId: null, name: ""}]|merge(profiles), "displayProfileId", "name", helpText) }}

                        {% set message %}{% trans "The settings for this display are shown below. They are taken from the active Display Profile for this Display, which can be changed in Display Settings. If you have altered the Settings Profile above, you will need to save and re-show the form." %}{% endset %}
                        {{ forms.message(message) }}

                        <table id="settings-from-profile" class="table table-striped">
                            <thead>
                                <th>{{ "Setting"|trans }}</th>
                                <th>{{ "Profile"|trans }}</th>
                                <th>{{ "Override"|trans }}</th>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                    <div class="tab-pane" id="advanced">
                        {% set title %}{% trans "Interleave Default" %}{% endset %}
                        {% set helpText %}{% trans "Whether to always put the default layout into the cycle." %}{% endset %}
                        {% set yes %}{% trans "Yes" %}{% endset %}
                        {% set no %}{% trans "No" %}{% endset %}
                        {% set options = [
                        { id: 0, value: no },
                        { id: 1, value: yes }
                        ] %}
                        {{ forms.dropdown("incSchedule", "single", title, display.incSchedule, options, "id", "value", helpText) }}

                        {% set title %}{% trans "Auditing until" %}{% endset %}
                        {% set helpText %}{% trans "Collect auditing from this Player. Should only be used if there is a problem with the display." %}{% endset %}
                        {% if display.isAuditing() %}
                            {% set auditing = display.getUnmatchedProperty("auditingUntilIso") %}
                        {% else %}
                            {% set auditing = "" %}
                        {% endif %}
                        {{ forms.dateTime("auditingUntil", title, auditing, helpText) }}

                        {% set title %}{% trans "Bandwidth limit" %}{% endset %}
                        {% set helpText %}{% trans "The bandwidth limit that should be applied. Enter 0 for no limit." %}{% endset %}
                        <div class="form-group row">
                            <label class="col-sm-2 control-label" for="bandwidthLimit">{{ title }}</label>
                            <div class="col-sm-6">
                                <input class="form-control" name="bandwidthLimit" type="number" id="bandwidthLimit" min="0" value="{{ display.bandwidthLimit }}"/>
                                <span class="help-block">{{ helpText }}</span>
                            </div>
                            <div class="col-sm-4">
                                <select name="bandwidthLimitUnits" class="form-control">
                                    <option value="kb">KiB</option>
                                    <option value="mb">MiB</option>
                                    <option value="gb">GiB</option>
                                </select>
                            </div>
                        </div>

                        {% set title %}{% trans "Clear Cached Data" %}{% endset %}
                        {% set helpText %}{% trans "Remove any cached data for this display." %}{% endset %}
                        {{ forms.checkbox("clearCachedData", title, 1, helpText) }}

                        {% set title %}{% trans "Reconfigure XMR" %}{% endset %}
                        {% set helpText %}{% trans "Remove the XMR configuration for this Player and send a rekey action." %}{% endset %}
                        {{ forms.checkbox("rekeyXmr", title, 0, helpText) }}
                    </div>

                    <div class="tab-pane" id="remote">
                        {% set title %}{% trans "TeamViewer Serial" %}{% endset %}
                        {% set helpText %}{% trans "If TeamViewer is installed on the device, enter the serial number here." %}{% endset %}
                        {{ forms.input("teamViewerSerial", title, display.teamViewerSerial, helpText) }}

                        {% set title %}{% trans "Webkey Serial" %}{% endset %}
                        {% set helpText %}{% trans "If Webkey is installed on the device, enter the serial number here." %}{% endset %}
                        {{ forms.input("webkeySerial", title, display.webkeySerial, helpText) }}
                    </div>
                </div>
            </form>


            <div id="settings-from-display-profile" style="display:none">
                {# Output the relevant form depending on the display profile player type #}
                {% if displayProfile.getClientType() == "android" %}
                    {% include "displayprofile-form-edit-android.twig" %}
                {% elseif displayProfile.getClientType() == "windows" %}
                    {% include "displayprofile-form-edit-windows.twig" %}
                {% elseif displayProfile.getClientType() == "linux" %}
                    {% include "displayprofile-form-edit-linux.twig" %}
                {% elseif displayProfile.getClientType() == "lg" or displayProfile.getClientType() == "sssp"  %}
                    {% include "displayprofile-form-edit-soc.twig" %}
                {% elseif displayProfile.getClientType() == "chromeOS" %}
                    {% include "displayprofile-form-edit-chromeos.twig" %}
                {% elseif displayProfile.isCustom() %}
                    {{ include(displayProfile.getCustomEditTemplate()) }}
                {% endif %}

                {% include "displayprofile-form-edit-javascript.twig" %}
            </div>
        </div>
    </div>
{% endblock %}
