{#
/**
 * 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 "base.twig" %}

{% block content %}
    {% set horizontalNav = currentUser.getOptionValue("navigationMenuPosition", theme.getSetting("NAVIGATION_MENU_POSITION", "vertical")) == "horizontal" %}

    {% if not hideNavigation %}
        {% set hideNavigation = currentUser.getOptionValue("hideNavigation", "0") %}
    {% endif %}

    <div {% if hideNavigation == "0" and not horizontalNav and not forceHide %}id="page-wrapper"{% endif %} class="active">

        {% if hideNavigation == "0" and not forceHide %}
            {% if horizontalNav %}
                <nav class="navbar navbar-default navbar-expand-lg">
                    <a class="navbar-brand xibo-logo-container" href="#">
                        <img class="xibo-logo" src="{{ theme.uri("img/xibologo.png") }}">
                    </a>

                    <!-- Brand and toggle get grouped for better mobile display -->
                    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse-1" aria-controls="navbarNav" aria-expanded="false">
                        <span class="fa fa-bars"></span>
                    </button>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="navbar-collapse collapse justify-content-between" id="navbar-collapse-1">
                        {% include "authed-topbar.twig" %}

                        <ul class="nav navbar-nav navbar-right">
                            {% include "authed-theme-topbar.twig" ignore missing %}
                            {% if currentUser.featureEnabled("drawer") %}
                                {% include "authed-notification-drawer.twig" %}
                            {% endif %}
                            {% include "authed-user-menu.twig" %}
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </nav>
            {% else %}
                <div class="navbar-collapse navbar-collapse-side collapse" id="navbar-collapse-1">
                    {% include "authed-sidebar.twig" %}
                </div>
            {% endif %}
        {% endif %}


        <div id="content-wrapper">
            <div class="page-content">
                {% if not horizontalNav or hideNavigation == "1" or forceHide %}
                <div class="row header header-side">
                    <div class="col-sm-12">
                        <div class="meta pull-left xibo-logo-container">
                            <div class="page"><img class="xibo-logo" src="{{ theme.uri("img/xibologo.png") }}"></div>
                        </div>
                        {% if not forceHide %}
                            {% if not hideNavigation == "1" %}
                                <button type="button" class="pull-right navbar-toggler navbar-toggler-side" data-toggle="collapse" data-target="#navbar-collapse-1" aria-controls="navbarNav" aria-expanded="false">
                                    <span class="fa fa-bars"></span>
                                </button>
                            {% endif %}
                            <div class="user pull-right">
                                {% include "authed-user-menu.twig" %}
                            </div>
                            {% if currentUser.featureEnabled("drawer") %}
                            <div class="user user-notif pull-right">
                                {% include "authed-notification-drawer.twig" %}
                            </div>
                            {% endif %}
                            {% include "authed-theme-topbar.twig" ignore missing %}
                        {% endif %}
                    </div>
                </div>
                {% endif %}
                <div class="row">
                    <div class="col-sm-12">
                        {% block actionMenu %}{% endblock %}
                        {% block pageContent %}{% endblock %}
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        {% block pageFooter %}{% endblock %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% set helpLinks = helpService.getLinksForPage(route) %}
    {% set isXiboThemed = theme.getThemeConfig("app_name") == "Xibo" %}
    {% if helpLinks|length > 0 %}
        <div id="help-pane" class="help-pane">
            <div class="card help-pane-card border-dark">
                <div class="card-header">{{ "Help"|trans }} <i class="close-icon fa fa-times"></i></div>
                <ul class="list-group list-group-flush">
                    {% for link in helpLinks %}
                        {% if link.isAllowWhiteLabel or isXiboThemed %}
                            <li class="list-group-item">
                                <a href="{{ link.url }}" target="_blank">{{ link.title }}</a>
                                {% if link.summary %}
                                    <br/>
                                    {{ link.summary|raw }}
                                {% endif %}
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>
                <div class="card-footer">
                    <a href="{{ helpService.getLandingPage() }}" target="_blank">{{ "Visit the user manual"|trans }}</a>
                </div>
            </div>
            <div class="help-pane-icon">
                <i class="fa fa-question-circle"></i>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block javaScriptTemplates %}
    {% include 'schedule-form-templates.twig' %}

    <script type="text/javascript">
        var userPreferencesUrl = "{{ url_for("user.pref") }}";

        // TODO: Change this to a call to all route permissions ( something like currentUser.getRoutePermissions() )
        var userRoutePermissions = {
            tags: "{{ currentUser.featureEnabled('tag.tagging') }}"
        };

        // Equals helper for the templates below
        Handlebars.registerHelper('eq', function(v1, v2, opts) {
            if (v1 === v2) {
                return opts.fn(this);
            } else {
                return opts.inverse(this);
            }
        });

        Handlebars.registerHelper('neq', function(v1, v2, opts) {
            if (v1 !== v2) {
                return opts.fn(this);
            } else {
                return opts.inverse(this);
            }
        });
    </script>

    {% verbatim %}
    <script type="text/x-handlebars-template" id="buttons-template">
        <div class="btn-group pull-right dropdown-menu-container" title="{% endverbatim %}{% trans "Row Menu" %}{% verbatim %}">
            <button class="btn btn-white dropdown-toggle" data-toggle="dropdown"></button>
            <div class="dropdown-menu dropdown-menu-right">
                {{#each buttons}}
                    {{#if divider}}
                        <div class="dropdown-divider"></div>
                    {{else multiSelectOnly}}
                        <a {{#each dataAttributes}}
                            data-{{ name }}="{{ value }}"
                            {{/each}}
                            class="dropdown-item multi-select-button {{#if class}}{{ class }}{{else}}XiboMultiHiddenButton{{/if}} {{ id }}" style="display: none;" tabindex="-1" href="#">
                            {{ text }}
                        </a>
                    {{else}}
                        {{#if external}}
                            <a class="dropdown-item {{ id }}" tabindex="-1" target="{{ linkType }}" onclick="{{ onclick }}" href="{{ url }}"{{#if title}} title="{{title}}"{{/if}}>{{ text }}</a>
                        {{/if}}

                        {{#unless external}}
                            <a {{#each dataAttributes}}
                                data-{{ name }}="{{ value }}"
                                {{/each}}
                                class="dropdown-item {{#if multi-select}}multi-select-button{{/if}} {{#if class}}{{ class }}{{else}}XiboFormButton{{/if}} {{ id }}" href="{{ url }}"{{#if title}} title="{{title}}"{{/if}} tabindex="-1" href="#">
                                {{ text }}
                            </a>
                        {{/unless}}
                    {{/if}}
                {{/each}}
            </div>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="multiselect-button-template">
        <div class="btn-group dropup mr-2">
            <button class="btn btn-primary select-all" data-toggle="selectAll">
                {{ selectAll }}
            </button>
            <button class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                {{ withSelected }}
            </button>
            <div class="dropdown-menu">
                {{#each buttons}}
                    {{#if divider}}
                        <div class="dropdown-divider"></div>
                    {{else}}
                        <a class="dropdown-item XiboMultiSelectFormButton" data-custom-handler="{{ customHandler }}" data-custom-handler-url="{{ customHandlerUrl }}" data-button-id="{{ id }}" data-grid-id="{{ gridId }}" data-content-type="{{ contentType }}" data-content-id-name="{{ contentIdName }}" tabindex="-1" href="#">{{ text }}</a>
                    {{/if}}
                {{/each}}
            </div>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="command-input-main-template">

        <div class="form-check pull-right">
            <input type="checkbox" class="show-command-preview form-check-input" id="showCommandPreview{{ unique }}" name="showCommandPreview{{ unique }}" title="{% endverbatim %}{% trans "Show command preview!" %}{% verbatim %}">
            <label for="showCommandPreview{{ unique }}" class="show-command-preview-label form-check-label">{% endverbatim %}{% trans "Show command preview!" %}{% verbatim %}</label>
        </div>

        <select class="command-type form-control form-control-inline">
            {{#each types}}
                <option value="{{ @key }}" {{#eq @key ../type}}selected="selected"{{/eq}}>{{ this }}</option>
            {{/each}}
        </select>
        <div class="command-inputs panel panel-default"></div>

        <div disabled="disabled" class="command-preview bg-primary p-2 w-100" data-invalid-message="{% endverbatim %}{% trans 'Invalid command!' %}{% verbatim %}">
          <code class="text-white"></code>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="command-input-freetext-template">
        <input class="free-text form-control form-control-inline" value="{{ initVal }}">
    </script>

    <script type="text/x-handlebars-template" id="command-input-tpv_led-template">
        <select name="tpv_ledCommand{{ unique }}" id="tpv_ledCommand{{ unique }}" class="tpv-led-command form-control form-control-inline" style="width:100%">
            <option value="off" {{#eq value "off"}}selected="selected"{{/eq}}>{% endverbatim %}{% trans "Off" %}{% verbatim %}</option>
            <option value="red" {{#eq value "red"}}selected="selected"{{/eq}}>{% endverbatim %}{% trans "Red" %}{% verbatim %}</option>
            <option value="green" {{#eq value "green"}}selected="selected"{{/eq}}>{% endverbatim %}{% trans "Green" %}{% verbatim %}</option>
            <option value="blue" {{#eq value "blue"}}selected="selected"{{/eq}}>{% endverbatim %}{% trans "Blue" %}{% verbatim %}</option>
            <option value="white" {{#eq value "white"}}selected="selected"{{/eq}}>{% endverbatim %}{% trans "White" %}{% verbatim %}</option>
        </select>
    </script>

    <script type="text/x-handlebars-template" id="command-input-rs232-template">
        <div class="form-group-command form-group-device form-group-rs232">
            <input class="form-control form-control-inline validated-element rs232-text-input rs232-device-name" placeholder="{% endverbatim %}{% trans "Device Name/COM" %}{% verbatim %}" value="{{ value.cs.deviceName }}">
            <input class="form-control form-control-inline validated-element rs232-text-input rs232-baud-rate" placeholder="{% endverbatim %}{% trans "Baud Rate" %}{% verbatim %}" value="{{ value.cs.baudRate }}">
            <input class="form-control form-control-inline validated-element rs232-text-input rs232-data-bits" placeholder="{% endverbatim %}{% trans "Data Bits" %}{% verbatim %}" value="{{ value.cs.dataBits }}">
        </div>
        <div class="form-group-command form-group-rs232">
            <div class="col-12 col-sm-6">
                <label for="rs232Parity{{ unique }}">{% endverbatim %}{% trans "Parity:" %}{% verbatim %}</label>
                <select name="rs232Parity{{ unique }}" id="rs232Parity{{ unique }}" class="rs232-parity form-control">
                    <option value="None" {{#eq value.cs.parity "None"}}selected="selected"{{/eq}}>None</option>
                    <option value="Odd" {{#eq value.cs.parity "Odd"}}selected="selected"{{/eq}}>Odd</option>
                    <option value="Even" {{#eq value.cs.parity "Even"}}selected="selected"{{/eq}}>Even</option>
                    <option value="Mark" {{#eq value.cs.parity "Mark"}}selected="selected"{{/eq}}>Mark</option>
                    <option value="Space" {{#eq value.cs.parity "Space"}}selected="selected"{{/eq}}>Space</option>
                </select>
            </div>

            <div class="col-12 col-sm-6">
                <label for="rs232StopBits{{ unique }}">{% endverbatim %}{% trans "Stop Bits:" %}{% verbatim %}</label>
                <select name="rs232StopBits{{ unique }}" id="rs232StopBits{{ unique }}" class="rs232-stop-bits form-control">
                    <option value="None" {{#eq value.cs.stopBits "None"}}selected="selected"{{/eq}}>None</option>
                    <option value="One" {{#eq value.cs.stopBits "One"}}selected="selected"{{/eq}}>One</option>
                    <option value="Two" {{#eq value.cs.stopBits "Two"}}selected="selected"{{/eq}}>Two</option>
                    <option value="OnePointFive" {{#eq value.cs.stopBits "OnePointFive"}}selected="selected"{{/eq}}>OnePointFive</option>
                </select>
            </div>

            <div class="col-12 col-sm-6">
                <label for="rs232Handshake{{ unique }}">{% endverbatim %}{% trans "Handshake:" %}{% verbatim %}</label>
                <select name="rs232Handshake{{ unique }}" id="rs232Handshake{{ unique }}" class="rs232-handshake form-control">
                    <option value="None" {{#eq value.cs.handshake "None"}}selected="selected"{{/eq}}>None</option>
                    <option value="XOnXOff" {{#eq value.cs.handshake "XOnXOff"}}selected="selected"{{/eq}}>XOnXOff</option>
                    <option value="RequestToSend" {{#eq value.cs.handshake "RequestToSend"}}selected="selected"{{/eq}}>RequestToSend</option>
                    <option value="RequestToSendXOnXOff" {{#eq value.cs.handshake "RequestToSendXOnXOff"}}selected="selected"{{/eq}}>RequestToSendXOnXOff</option>
                </select>
            </div>
            
            <div class="col-12 col-sm-6">
                <label for="rs232HexSupport{{ unique }}">{% endverbatim %}{% trans "HexSupport:" %}{% verbatim %}</label>
                <select name="rs232HexSupport{{ unique }}" id="rs232HexSupport{{ unique }}" class="rs232-hex-support form-control">
                    <option value="0" {{#eq value.cs.hexSupport "0"}}selected="selected"{{/eq}}>0</option>
                    <option value="1" {{#eq value.cs.hexSupport "1"}}selected="selected"{{/eq}}>1</option>
                    <option value="default 0" {{#eq value.cs.hexSupport "default 0"}}selected="selected"{{/eq}}>default 0</option>
                </select>
            </div>
        </div>
        <div class="form-group-command form-group-rs232 command-group">
            <input class="form-control rs232-command" placeholder="{% endverbatim %}{% trans "Command" %}{% verbatim %}" value="{{ value.command }}">
        </div>
    </script>

    <script type="text/x-handlebars-template" id="command-input-intent-template">
        <div class="form-group-command intent-type-container">
            <label for="intentType{{ unique }}" class="intent-type-label">{% endverbatim %}{% trans "Type:" %}{% verbatim %}</label>
            <select name="intentType{{ unique }}" id="intentType{{ unique }}" class="intent-type form-control form-control-inline">
                <option value="activity" {{#eq value.type "activity"}}selected="selected"{{/eq}}>activity</option>
                <option value="service" {{#eq value.type "service"}}selected="selected"{{/eq}}>service</option>
                <option value="broadcast" {{#eq value.type "broadcast"}}selected="selected"{{/eq}}>broadcast</option>
            </select>
        </div>

        <input name="intentName{{ unique }}" id="intentName{{ unique }}" class="intent-name form-control validated-element form-control-inline" placeholder="{% endverbatim %}{% trans "Intent" %}{% verbatim %}" value="{{ value.name }}">

        <div class="form-group-command">
            <label for="intentExtraContainer{{ unique }}" class="intent-extra-container-label">{% endverbatim %}{% trans "Extra:" %}{% verbatim %}</label>
            <button class="intent-add-extra btn btn-info btn-sm pull-right" type="button">
                <i class="fa fa-plus"></i>
            </button>

            <div id="intentExtraContainer{{ unique }}" class="intent-extra-container"></div>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="command-input-intent-extra-template">
        <div class="intent-extra-element">
            <input class="form-control form-control-inline validated-element extra-name" placeholder="{% endverbatim %}{% trans "Name" %}{% verbatim %}" value="{{ name }}">
            <select class="form-control form-control-inline extra-type">
                <option value="string" {{#eq type "string"}}selected="selected"{{/eq}}>string</option>
                <option value="int" {{#eq type "int"}}selected="selected"{{/eq}}>int</option>
                <option value="bool" {{#eq type "bool"}}selected="selected"{{/eq}}>bool</option>
                <option value="intArray" {{#eq type "intArray"}}selected="selected"{{/eq}}>intArray</option
            </select>
            <input class="form-control form-control-inline validated-element extra-value" placeholder="{% endverbatim %}{% trans "Value" %}{% verbatim %}" value="{{ value }}">
            <button type="button" class="btn btn-sm btn-warning pull-right intent-remove-extra"><i class="fa fa-minus"></i></button>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="command-input-http-template">
        {{! URL }}
        <label for="httpURL{{ unique }}" class="http-url-label form-check-label">{% endverbatim %}{% trans "URL" %}{% verbatim %}</label>
        <input name="httpURL{{ unique }}" id="httpURL{{ unique }}" class="http-url w-100 validated-element form-control form-control-inline" placeholder="{% endverbatim %}{% trans "URL" %}{% verbatim %}" value="{{ value.url }}">

        {{! Query params }}
        <div class="request-params request-section mt-2">
            <div class="form-check w-100">
                <input type="checkbox" data-toggle-element=".query-builder-container"  data-toggle-class="d-inline-block" class="show-query-builder ignore-change form-check-input" id="queryParamsBuilder{{ unique }}" name="queryParamsBuilder{{ unique }}" title="{% endverbatim %}{% trans "Query params builder" %}{% verbatim %}" checked>
                <label for="queryParamsBuilder{{ unique }}" class="show-query-builder-label form-check-label">{% endverbatim %}{% trans "Query builder" %}{% verbatim %}</label>
            </div>
            <div class="form-group-command query-builder-container w-100 bg-white p-2 d-none d-inline-block">
                <label for="queryBuilderContainer{{ unique }}" class="http-key-value-container-label">{% endverbatim %}{% trans "Query params:" %}{% verbatim %}</label>
                <button class="http-key-value-add btn btn-info btn-sm pull-right" type="button">
                    <i class="fa fa-plus"></i>
                </button>

                <div id="queryBuilderContainer{{ unique }}" class="http-key-value-container"></div>
            </div>
        </div>

        {{! Method }}
        <div class="form-group-command mt-2">
            <label for="httpMethod{{ unique }}">{% endverbatim %}{% trans "Request method:" %}{% verbatim %}</label>
            <select name="httpMethod{{ unique }}" id="httpMethod{{ unique }}" class="http-method pl-1 form-control form-control-inline">
                <option value="GET" {{#eq value.requestOptions.method "GET"}}selected="selected"{{/eq}}>GET</option>
                <option value="POST" {{#eq value.requestOptions.method "POST"}}selected="selected"{{/eq}}>POST</option>
                <option value="PUT" {{#eq value.requestOptions.method "PUT"}}selected="selected"{{/eq}}>PUT</option>
                <option value="DELETE" {{#eq value.requestOptions.method "DELETE"}}selected="selected"{{/eq}}>DELETE</option>
                <option value="CONNECT" {{#eq value.requestOptions.method "CONNECT"}}selected="selected"{{/eq}}>CONNECT</option>
                <option value="HEAD" {{#eq value.requestOptions.method "HEAD"}}selected="selected"{{/eq}}>HEAD</option>
                <option value="OPTIONS" {{#eq value.requestOptions.method "OPTIONS"}}selected="selected"{{/eq}}>OPTIONS</option>
                <option value="PATCH" {{#eq value.requestOptions.method "PATCH"}}selected="selected"{{/eq}}>PATCH</option>
                <option value="TRACE" {{#eq value.requestOptions.method "TRACE"}}selected="selected"{{/eq}}>TRACE</option>
            </select>
        </div>

        {{! Headers }}
        <div class="request-headers request-section mt-2">
          <div class="form-check w-100">
              <input type="checkbox" data-toggle-element=".http-headers" data-toggle-element-reverse=".http-headers-container" data-toggle-class="d-inline-block" class="show-raw-headers ignore-change form-check-input" id="showRawHeaders{{ unique }}" name="showRawHeaders{{ unique }}" title="{% endverbatim %}{% trans "Show raw headers" %}{% verbatim %}">
              <label for="showRawHeaders{{ unique }}" class="show-raw-headers-label form-check-label">{% endverbatim %}{% trans "Show raw headers" %}{% verbatim %}</label>
          </div>
          <textarea name="httpHeaders{{ unique }}" id="httpHeaders{{ unique }}" class="http-headers w-100 d-none form-control validated-element form-control-inline" placeholder="{% endverbatim %}{% trans "Headers" %}{% verbatim %}"></textarea>
          <div class="form-group-command http-headers-container w-100 bg-white p-2 d-none d-inline-block">
              <label for="httpHeadersContainer{{ unique }}" class="http-key-value-container-label">{% endverbatim %}{% trans "Headers" %}{% verbatim %}</label>
              <button class="http-key-value-add btn btn-info btn-sm pull-right" type="button">
                  <i class="fa fa-plus"></i>
              </button>

              <div id="httpHeadersContainer{{ unique }}" class="http-key-value-container"></div>
          </div>
        </div>

        {{! Body }}
        <div class="request-body request-section mt-2">
            {{! Content type }}
            <div class="form-group-command">
                <label for="httpContentType{{ unique }}" class="pl-1">{% endverbatim %}{% trans "Content Type:" %}{% verbatim %}</label>
                <select name="httpContentType{{ unique }}" id="httpContentType{{ unique }}" class="http-contenttype form-control form-control-inline">
                    <option value="application/x-www-form-urlencoded" {{#eq value.contenttype "application/x-www-form-urlencoded"}}selected="selected"{{/eq}}>urlencoded</option>
                    <option value="application/json" {{#eq value.contenttype "application/json"}}selected="selected"{{/eq}}>json</option>
                    <option value="text/plain" {{#eq value.contenttype "text/plain"}}selected="selected"{{/eq}}>textplain</option>
                </select>
            </div>

            {{! Body data }}
            <div class="form-check w-100 mt-2">
                <input type="checkbox" data-toggle-element=".http-data" data-toggle-element-reverse=".http-data-container" data-toggle-class="d-inline-block" class="show-raw-data ignore-change form-check-input" id="showRawData{{ unique }}" name="showRawData{{ unique }}" title="{% endverbatim %}{% trans "Show raw body data" %}{% verbatim %}">
                <label for="showRawData{{ unique }}" class="show-raw-data-label form-check-label">{% endverbatim %}{% trans "Show raw data" %}{% verbatim %}</label>
            </div>
            <textarea name="httpData{{ unique }}" id="httpData{{ unique }}" class="http-data w-100 validated-element d-none form-control form-control-inline" placeholder="{% endverbatim %}{% trans "Body data" %}{% verbatim %}"></textarea>
            <div class="form-group-command http-data-container w-100 bg-white p-2 d-none d-inline-block">
                <label for="httpDataContainer{{ unique }}" class="http-key-value-container-label">{% endverbatim %}{% trans "Body data" %}{% verbatim %}</label>
                <button class="http-key-value-add btn btn-info btn-sm pull-right" type="button">
                    <i class="fa fa-plus"></i>
                </button>

                <div id="httpDataContainer{{ unique }}" class="http-key-value-container"></div>
            </div>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="command-input-http-key-value-template">
        <div class="http-key-value-element mt-1">
            <input class="form-control validated-element form-control-inline http-key" placeholder="{% endverbatim %}{% trans "Key" %}{% verbatim %}" value="{{ key }}">
            <input class="form-control validated-element form-control-inline http-value" placeholder="{% endverbatim %}{% trans "Value" %}{% verbatim %}" value="{{ value }}">
            <button type="button" class="btn btn-sm btn-warning pull-right http-key-value-remove"><i class="fa fa-minus"></i></button>
        </div>
    </script>
    {% endverbatim %}

    <script type="text/x-handlebars-template" id="multiselect-tag-edit-form-template">
        <form id="multiselectTagEditForm" data-gettag="{{ url_for("tag.getByName") }}">
            <input type="hidden" id="requestURL" name="requestURL" value="{{ url_for('tag.editMultiple', {type: '[type]'}) }}">
            <div class="form-group tags-with-value tags-input-wide row">
                <label class="col-sm-2 control-label" for="tagsToAdd">{% trans "New tags" %}</label>
                <div class="col-sm-10">
                    <input class="form-control" name="tagsToAdd" type="email" id="tagsToAdd" data-role="tagsInputForm" data-auto-complete-url="{{ url_for('tag.search') }}" />
                    <span class="help-block">{% trans "A comma separated list of tags to add to the selected elements." %}</span>
                </div>
            </div>

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

            <div class="form-group row">
                <label class="col-sm-2 control-label" for="tagValue" title="" accesskey="">{% trans "Tag value" %}</label>
                <div class="col-sm-10">
                    <select class="form-control" name="tagValue" id="tagValue"></select>
                </div>
            </div>

            <div id="tagValueContainer" style="display: none;">
                <div class="form-group row">
                    <label class="col-sm-2 control-label" for="tagValueInput" accesskey="">{% trans "Tag value" %}</label>
                    <div class="col-sm-10">
                        <input class="form-control" name="tagValueInput" type="text" id="tagValueInput" value="">
                        <span class="help-block">{% trans "Provide an optional Value for this Tag. If no Value is required, this field can be left blank." %}</span>
                    </div>
                </div>
            </div>

            <div id="tagValueRequired" class="alert alert-info d-none">
                <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>

            <div id="tagsToRemoveContainer" class="form-group tags-with-value tags-input-wide row">
                <label class="col-sm-2 control-label" for="tagsToRemove">{% trans "Existing tags" %}</label>
                <div class="col-sm-10">
                    <input class="form-control" name="tagsToRemove" type="email" id="tagsToRemove" data-role="tagsInputForm" data-auto-complete-url="{{ url_for('tag.search') }}" />
                    <span class="help-block">{% trans "Remove tags from the list to remove them from elements that contain them." %}</span>
                </div>
            </div>
        </form>
    </script>

    <script type="text/x-handlebars-template" id="display-status-window-template">
        <div style="margin-top:5px; max-height: 400px; overflow-y: auto;">
            {% verbatim %}
            {{#if data}}
            {% endverbatim %}
            {% trans "Player Status Window"%}:
            {% verbatim %}
                {{#eq type "android"}}
                    <div class="card p-3 mb-3 bg-light">
                          <span>{{{data}}}</span>
                    </div>
                {{/eq}}
                {{#neq type "android"}}
                    <div class="card p-3 mb-3 bg-light">
                        <ul>
                            {{#each data as |value key|}}
                            <li>{{key}}: {{value}}</li>
                            {{/each}}
                        </ul>
                    </div>
                {{/neq}}
            {{/if}}
            {% endverbatim %}
        </div>
    </script>

    <script type="text/x-handlebars-template" id="auto-submit-field-template">
        <div class="checkbox">
            <label for="autoSubmit" accesskey="a" title="{% trans "When enabled, this form will automatically submit in future. Reset this in your User Profile." %}">
                <input type="checkbox" id="autoSubmit" name="autoSubmit">
                {% trans "Automatically submit this form?" %}
            </label>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="folder-tree-template">
        <!-- Modal -->
        {% verbatim %}
        <div id="{{ modal }}" class="modal fade inner-modal" role="dialog">
         {% endverbatim %}
            <div class="modal-dialog modal-sm" style="width:450px;">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">{% trans "Select Folder" %}</h4>
                        <button type="button" class="close btnCloseInnerModal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group card p-3 mb-3 bg-light">
                        <input id="jstree-search-form" class="form-control" type="text" placeholder="{% trans "Search" %}">
                        <div class="folder-search-no-results d-none">
                            <p>{% trans 'No Folders matching the search term' %}</p>
                        </div>
                            {% verbatim %}
                                <div id="{{ container }}"></div>
                            {% endverbatim %}
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white btnCloseInnerModal">{% trans "Done" %}</button>
                    </div>
                </div>

            </div>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="mini-player-template">
        <div id="miniLayoutPreview" class="mini-layout-preview">
            <div id="playBtn" class="fa fa-play preview-button" title="{% trans "Play Preview" %}"></div>
            <div id="closeBtn" class="fa fa-close preview-button" title="{% trans "Close Preview" %}"></div>
            <div id="sizeBtn" class="fa fa-plus-square preview-button" title="{% trans "Change window size" %}"></div>
            <div id="newTabBtn" class="fa fa-external-link-square preview-button" title="{% trans "Preview in new window" %}"></div>
            <div id="content"></div>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="xibo-filter-clear-button">
        <div class="clear-filter-btn-container" style="margin-left: auto;">
            <a class="clear-filter-btn nav-link" role="button">
                <i class="fa fa-eraser" aria-hidden="true"></i>
                <span>{% trans "Clear Filters" %}</span>
            </a>
        </div>
    </script>

    <script type="text/x-handlebars-template" id="php-date-format-table">
        <div class="popover-content-container">
            <div class="scrollable-popover-table">
                <table>
                    <thead>
                    <tr>
                        <th>Format character</th>
                        <th>Description</th>
                        <th>Example returned values</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Day</td>
                        <td>—</td>
                        <td>—</td>
                    </tr>
                    <tr>
                        <td>d</td>
                        <td>Day of the month, 2 digits with leading zeros</td>
                        <td>01 to 31</td>
                    </tr>
                    <tr>
                        <td>D</td>
                        <td>A textual representation of a day, three letters</td>
                        <td>Mon through Sun</td>
                    </tr>
                    <tr>
                        <td>j</td>
                        <td>Day of the month without leading zeros</td>
                        <td>1 to 31</td>
                    </tr>
                    <tr>
                        <td>l</td>
                        <td>(lowercase ‘L’) A full textual representation of the day of the week</td>
                        <td>Sunday through Saturday</td>
                    </tr>
                    <tr>
                        <td>N</td>
                        <td>ISO-8601 numeric representation of the day of the week (added in PHP 5.1.0)</td>
                        <td>1 (for Monday) through 7 (for Sunday)</td>
                    </tr>
                    <tr>
                        <td>S</td>
                        <td>English ordinal suffix for the day of the month, 2 characters</td>
                        <td>st, nd, rd or th. Works well with j</td>
                    </tr>
                    <tr>
                        <td>w</td>
                        <td>Numeric representation of the day of the week</td>
                        <td>0 (for Sunday) through 6 (for Saturday)</td>
                    </tr>
                    <tr>
                        <td>z</td>
                        <td>The day of the year (starting from 0)</td>
                        <td>0 through 365</td>
                    </tr>
                    <tr>
                        <td>Week</td>
                        <td>—</td>
                        <td>—</td>
                    </tr>
                    <tr>
                        <td>W</td>
                        <td>ISO-8601 week number of year, weeks starting on Monday (added in PHP 4.1.0)</td>
                        <td>42 (the 42nd week in the year)</td>
                    </tr>
                    <tr>
                        <td>Month</td>
                        <td>—</td>
                        <td>—</td>
                    </tr>
                    <tr>
                        <td>F</td>
                        <td>A full textual representation of a month, such as January or March</td>
                        <td>January through December</td>
                    </tr>
                    <tr>
                        <td>m</td>
                        <td>Numeric representation of a month, with leading zeros</td>
                        <td>01 through 12</td>
                    </tr>
                    <tr>
                        <td>M</td>
                        <td>A short textual representation of a month, three letters</td>
                        <td>Jan through Dec</td>
                    </tr>
                    <tr>
                        <td>n</td>
                        <td>Numeric representation of a month, without leading zeros</td>
                        <td>1 through 12</td>
                    </tr>
                    <tr>
                        <td>t</td>
                        <td>Number of days in the given month</td>
                        <td>28 through 31</td>
                    </tr>
                    <tr>
                        <td>Year</td>
                        <td>—</td>
                        <td>—</td>
                    </tr>
                    <tr>
                        <td>L</td>
                        <td>Whether it’s a leap year</td>
                        <td>1 if it is a leap year, 0 otherwise.</td>
                    </tr>
                    <tr>
                        <td>o</td>
                        <td>ISO-8601 year number. This has the same value as Y, except that if the ISO week number (W) belongs to the previous or next year, that year is used instead. (added in PHP 5.1.0)</td>
                        <td>1999 or 2003</td>
                    </tr>
                    <tr>
                        <td>Y</td>
                        <td>A full numeric representation of a year, 4 digits</td>
                        <td>1999 or 2003</td>
                    </tr>
                    <tr>
                        <td>y</td>
                        <td>A two digit representation of a year</td>
                        <td>99 or 03</td>
                    </tr>
                    <tr>
                        <td>Time</td>
                        <td>—</td>
                        <td>—</td>
                    </tr>
                    <tr>
                        <td>a</td>
                        <td>Lowercase Ante meridiem and Post meridiem</td>
                        <td>am or pm</td>
                    </tr>
                    <tr>
                        <td>A</td>
                        <td>Uppercase Ante meridiem and Post meridiem</td>
                        <td>AM or PM</td>
                    </tr>
                    <tr>
                        <td>B</td>
                        <td>Swatch Internet time</td>
                        <td>000 through 999</td>
                    </tr>
                    <tr>
                        <td>g</td>
                        <td>12-hour format of an hour without leading zeros</td>
                        <td>1 through 12</td>
                    </tr>
                    <tr>
                        <td>G</td>
                        <td>24-hour format of an hour without leading zeros</td>
                        <td>0 through 23</td>
                    </tr>
                    <tr>
                        <td>h</td>
                        <td>12-hour format of an hour with leading zeros</td>
                        <td>01 through 12</td>
                    </tr>
                    <tr>
                        <td>H</td>
                        <td>24-hour format of an hour with leading zeros</td>
                        <td>00 through 23</td>
                    </tr>
                    <tr>
                        <td>i</td>
                        <td>Minutes with leading zeros</td>
                        <td>00 to 59</td>
                    </tr>
                    <tr>
                        <td>s</td>
                        <td>Seconds, with leading zeros</td>
                        <td>00 through 59</td>
                    </tr>
                    <tr>
                        <td>u</td>
                        <td>Microseconds (added in PHP 5.2.2). Note that date() will always generate 000000 since it takes an integer parameter, whereas DateTime::format() does support microseconds if DateTime was created with microseconds.</td>
                        <td>654321</td>
                    </tr>
                    <tr>
                        <td>Timezone</td>
                        <td>—</td>
                        <td>—</td>
                    </tr>
                    <tr>
                        <td>e</td>
                        <td>Timezone identifier (added in PHP 5.1.0)</td>
                        <td>UTC, GMT, Atlantic/Azores</td>
                    </tr>
                    <tr>
                        <td>I</td>
                        <td>(capital i) Whether or not the date is in daylight saving time</td>
                        <td>1 if Daylight Saving Time, 0 otherwise.</td>
                    </tr>
                    <tr>
                        <td>O</td>
                        <td>Difference to Greenwich time (GMT) in hours</td>
                        <td>+0200</td>
                    </tr>
                    <tr>
                        <td>P</td>
                        <td>Difference to Greenwich time (GMT) with colon between hours and minutes (added in PHP 5.1.3)</td>
                        <td>+02:00</td>
                    </tr>
                    <tr>
                        <td>T</td>
                        <td>Timezone abbreviation</td>
                        <td>EST, MDT …</td>
                    </tr>
                    <tr>
                        <td>Z</td>
                        <td>Timezone offset in seconds. The offset for timezones west of UTC is always negative, and for those east of UTC is always positive.</td>
                        <td>-43200 through 50400</td>
                    </tr>
                    <tr>
                        <td>Full Date/Time</td>
                        <td>—</td>
                        <td>—</td>
                    </tr>
                    <tr>
                        <td>c</td>
                        <td>ISO 8601 date (added in PHP 5)</td>
                        <td>2004-02-12T15:19:21+00:00</td>
                    </tr>
                    <tr>
                        <td>r</td>
                        <td>» RFC 2822 formatted date</td>
                        <td>Thu, 21 Dec 2000 16:01:07 +0200</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </script>

    <script  type="text/javascript">
        function moveFolderMultiSelectFormOpen(dialog) {
            // make bootstrap happy.
            if ($('#folder-tree-form-modal').length != 0) {
                $('#folder-tree-form-modal').remove();
            }

            var folderContainer = '<div class="card p-3 mb-3 bg-light" id="container-folder-form-tree"></div>';
            var $hiddenInput = $('<input name="folderId" type="hidden" id="formFolderId">');

            $hiddenInput.on('change', function() {
                dialog.data().commitData = {folderId: $(this).val()};
            });

            $(dialog).find('.modal-body').append(folderContainer);
            $(dialog).find('.modal-body').append($hiddenInput);
            initJsTreeAjax('#container-folder-form-tree', "multi-select-folder", true, 600000);
        }

        function triggerWebhookMultiSelectFormOpen(dialog) {
            var $triggerCode =   $(
                '<div class="form-group row">' +
                '<label class="col-sm-2 control-label" for="triggerCode" accesskey="">{% trans "Trigger Code" %}</label>' +
                '<div class="col-sm-10">' +
                '<input class="form-control" name="triggerCode" type="text" id="triggerCode" value="">' +
                '<span class="help-block">{% trans "Enter the code associated with the web hook you wish to trigger. Please note that for this action to work, the webhook trigger code has to be added to Interactive Actions in scheduled content for this Player."%}</span>' +
                '</div>' +
                '</div>'
            );

            $(dialog).find('.modal-body').append($triggerCode);

            $('#triggerCode').on('change', function() {

                dialog.data().commitData = {
                    triggerCode: $('#triggerCode').val()
                };
            });
        }

        function sendCommandMultiSelectFormOpen(dialog) {
          // Inject a list of layouts into the form, in a drop down.
          const $commandSelect = $(
            '<div class="form-group form-horizontal row mt-4">' +
            '<label class="col-sm-2 control-label" for="commandId" accesskey="">{% trans "Command" %}</label>' +
            '<div class="col-sm-10">' +
            '<select name="commandId" class="form-control" data-search-url="{{ url_for("command.search") }}" data-search-term="commandLike" data-id-property="commandId" data-text-property="command">' +
            '<span class="help-block">{% trans "Pick a command to send to the Player. If the CMS has XMR enabled this will be sent immediately, otherwise it will show an error."%}</span>' +
            '</div>' +
            '</div>'
          );

          // Add the list to the body.
          $(dialog).find('.modal-body').append($commandSelect);

          makePagedSelect(dialog.find('select[name="commandId"]'), dialog);

          dialog.find('select[name="commandId"]').on('select2:select', function() {
            dialog.data().commitData = {commandId: $(this).select2('data')[0].id};
          });
        }
    </script>

    {# File upload templates and scripts #}
    {% include "include-file-upload.twig" %}
{% endblock %}