{#
/**
 * Copyright (C) 2023 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 "authed.twig" %}
{% import "inline.twig" as inline %}
{% import "forms.twig" as forms %}

{% block title %}{{ "Schedule"|trans }} | {% endblock %}

{% block actionMenu %}
    {% if currentUser.featureEnabled("schedule.add") %}
        <div class="widget-action-menu pull-right">
            {% if currentUser.featureEnabled("schedule.sync") %}
                <button class="btn btn-white XiboFormButton btns" title="{% trans "Add a new Sync event" %}"
                        href="{{ url_for("schedule.add.sync.form") }}"><span
                            class="fa fa-plus"></span> {% trans "Add Synchronised Event" %}</button>
            {% endif %}
            <button class="btn btn-success XiboFormButton btns" title="{% trans "Add a new Scheduled event" %}"
                    href="{{ url_for("schedule.add.form") }}"><span class="fa fa-plus"></span> {% trans "Add Event" %}
            </button>
        </div>
    {% endif %}
{% endblock %}

{% block pageContent %}
    <div class="widget">
        <div class="widget-title">{% trans "Schedule" %}</div>
        <div class="widget-body">
            <div class="XiboGrid" id="{{ random() }}" data-grid-name="scheduleGridView">
                <div class="XiboFilter card mb-3 bg-light">
                    <div class="FilterDiv card-body" id="schedule-filter">
                        <form class="form-inline">
                            {% set title %}{% trans "Range" %}{% endset %}
                            {% set range %}{% trans "Select a range" %}{% endset %}
                            {% set day %}{% trans "Today" %}{% endset %}
                            {% set week %}{% trans "This Week" %}{% endset %}
                            {% set month %}{% trans "This Month" %}{% endset %}
                            {% set year %}{% trans "This Year" %}{% endset %}
                            {% set yesterday %}{% trans "Yesterday" %}{% endset %}
                            {% set lastweek %}{% trans "Last Week" %}{% endset %}
                            {% set lastmonth %}{% trans "Last Month" %}{% endset %}
                            {% set lastyear %}{% trans "Last Year" %}{% endset %}
                            {% set agenda %}{% trans "Agenda" %}{% endset %}
                            {% set options = [
                                { name: "custom", range: range },
                                { name: "day", range: day },
                                { name: "week", range: week },
                                { name: "month", range: month },
                                { name: "year", range: year },
                                { name: "lastday", range: yesterday },
                                { name: "lastweek", range: lastweek },
                                { name: "lastmonth", range: lastmonth },
                                { name: "lastyear", range: lastyear },
                                { name: "agenda", range: agenda}
                            ] %}
                            {{ inline.dropdown("range", "single", title, "month", options, "name", "range", "", "date-range-input") }}

                            {% set title %}{% trans 'From Date' %}{% endset %}
                            {{ inline.dateTime("fromDt", title, "", "", "custom-date-range", "", "") }}

                            {% set title %}{% trans 'To Date' %}{% endset %}
                            {{ inline.dateTime("toDt", title, "", "", "custom-date-range", "", "") }}

                            {% set title %}{% trans "Name" %}{% endset %}
                            {{ inline.inputNameGrid('name', title, "non-agenda-filter") }}

                            {% set title %}{% trans 'Event Type' %}{% endset %}
                            {{ inline.dropdown("eventTypeId", "single", title, "", [{eventTypeId: null, eventTypeName: "All"}]|merge(eventTypes), "eventTypeId", "eventTypeName", "", "non-agenda-filter") }}

                            {% set title %}{% trans "Layout / Campaign" %}{% endset %}
                            {% set helpText %}{% trans "Please select a Layout or Campaign for this Event to show" %}{% endset %}

                            <div class="form-group mr-1 mb-1 non-agenda-filter">
                                <label class="control-label mr-1" for="campaignId" title=""
                                       accesskey="">{{ title }}</label>
                                <select name="campaignId" id="campaignIdFilter" class="form-control"
                                        data-search-url="{{ url_for("campaign.search") }}"
                                        data-trans-campaigns="{% trans "Campaigns" %}"
                                        data-trans-layouts="{% trans "Layouts" %}"
                                        data-allow-clear="true"
                                        data-width="100%"
                                        title="{% trans "Layout / Campaign" %}"
                                        data-placeholder="{% trans "Layout / Campaign" %}"
                                        data-dropdownAutoWidth
                                >
                                </select>
                            </div>

                            {% set title %}{% trans "Displays" %}{% endset %}
                            <div class="form-group mr-1 mb-1 pagedSelect" style="min-width: 200px">
                                <label class="control-label mr-1" for="DisplayList" title=""
                                       accesskey="">{{ title }}</label>
                                <select id="DisplayList" class="form-control" name="displayGroupIds[]"
                                        data-width="100%"
                                        data-placeholder="{% trans "Displays" %}"
                                        data-search-url="{{ url_for("display.search") }}"
                                        data-search-term="display"
                                        data-id-property="displayGroupId"
                                        data-text-property="display"
                                        data-additional-property="displayGroupId"
                                        data-allow-clear="true"
                                        multiple>
                                    {% for option in displaySpecificDisplayGroups %}
                                        {% set itemOptionId = attribute(option, "displayGroupId") %}
                                        {% set itemOptionValue = attribute(option, "displayGroup") %}
                                        <option value="{{ itemOptionId }}" selected>{{ itemOptionValue }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            {% set title %}{% trans "Display Groups" %}{% endset %}
                            <div class="form-group mr-2 mb-1 pagedSelect" style="min-width: 200px">
                                <label class="control-label mr-1" for="DisplayGroupList" title=""
                                       accesskey="">{{ title }}</label>
                                <select id="DisplayGroupList" class="form-control" name="displayGroupIds[]"
                                        data-width="100%"
                                        data-placeholder="{% trans "Display Groups" %}"
                                        data-search-url="{{ url_for("displayGroup.search") }}"
                                        data-search-term="displayGroup"
                                        data-id-property="displayGroupId"
                                        data-text-property="displayGroup"
                                        data-allow-clear="true"
                                        multiple>
                                    {% for option in displayGroups %}
                                        {% set itemOptionId = attribute(option, "displayGroupId") %}
                                        {% set itemOptionValue = attribute(option, "displayGroup") %}
                                        <option value="{{ itemOptionId }}" selected>{{ itemOptionValue }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            {% set label %}{% trans "Direct Schedule?" %}{% endset %}
                            {% set title %}{% trans "Show only events scheduled directly on selected Displays/Groups" %}{% endset %}
                            <div class="form-group mr-1 mb-1">
                                <label class="control-label mr-1" title="{{ title }}" for="directSchedule" accesskey="">{{ label }}</label>
                                <div>
                                    <div class="input-group" style="height: 34px">
                                        <div class="input-group-append input-group-addon">
                                            <div class="input-group-text">
                                                <input title="{{ title }}" type="checkbox" id="directSchedule" name="directSchedule">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {% set title %}{% trans "Only show schedules which appear on all filtered displays/groups?" %}{% endset %}
                            {% set label %}{% trans "Shared Schedule?" %}{% endset %}
                            <div class="form-group mr-1 mb-1">
                                <label class="control-label mr-1" title="{{ title }}" for="directSchedule" accesskey="">{{ label }}</label>
                                <div>
                                    <div class="input-group" style="height: 34px">
                                        <div class="input-group-append input-group-addon">
                                            <div class="input-group-text">
                                                <input title="{{ title }}" type="checkbox" id="sharedSchedule" name="sharedSchedule">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {% set title %}{% trans 'Geo Aware?' %}{% endset %}
                            {% set options = [
                                { id: null, name: "Both"|trans },
                                { id: 0, name: "No"|trans },
                                { id: 1, name: "Yes"|trans }
                            ] %}
                            {{ inline.dropdown("geoAware", "single", title, "both", options, "id", "name", "", "non-agenda-filter") }}

                            {% set title %}{% trans 'Recurring?' %}{% endset %}
                            {% set options = [
                                { id: null, name: "Both" },
                                { id: 0, name: "No"|trans },
                                { id: 1, name: "Yes"|trans }
                            ] %}
                            {{ inline.dropdown("recurring", "single", title, "both", options, "id", "name", "", "non-agenda-filter") }}
                        </form>
                    </div>
                </div>

                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                            <a class="schedule-nav nav-link active" id="grid-tab" href="#grid-view" role="tab"
                               data-toggle="tab"><span>{% trans "Grid" %}</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="schedule-nav nav-link" id="calendar-tab" href="#calendar-view"
                               data-calendar-view="month" role="tab"
                               data-toggle="tab"><span>{% trans "Calendar" %}</span></a>
                        </li>
                    </ul>
                </div>

                <div class="card-body">
                    <div class="tab-content">
                    <div class="tab-pane active" id="grid-view">
                        <div class="XiboData pt-3">
                            <table id="schedule-grid" class="table table-striped w-100"
                                   data-state-preference-name="scheduleGrid">
                                <thead>
                                <tr>
                                    <th>{% trans 'ID' %}</th>
                                    <th></th>
                                    <th>{% trans 'Event Type' %}</th>
                                    <th>{% trans 'Name' %}</th>
                                    <th>{% trans 'Start' %}</th>
                                    <th>{% trans 'End' %}</th>
                                    <th>{% trans 'Event' %}</th>
                                    <th>{% trans 'Campaign ID' %}</th>
                                    <th>{% trans 'Display Groups' %}</th>
                                    <th>{% trans 'SoV' %}</th>
                                    <th>{% trans 'Max Plays per Hour' %}</th>
                                    <th>{% trans 'Geo Aware?' %}</th>
                                    <th>{% trans 'Recurring?' %}</th>
                                    <th>{% trans 'Recurrence Description' %}</th>
                                    <th>{% trans 'Recurrence Type' %}</th>
                                    <th>{% trans 'Recurrence Interval' %}</th>
                                    <th>{% trans 'Recurrence Repeats On' %}</th>
                                    <th>{% trans 'Recurrence End' %}</th>
                                    <th>{% trans 'Priority?' %}</th>
                                    <th>{% trans 'Created On' %}</th>
                                    <th>{% trans 'Updated On' %}</th>
                                    <th>{% trans 'Modified By' %}</th>
                                    <th class="rowMenu"></th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="tab-pane" id="calendar-view">
                        <div class="row">
                            <div class="text-center text-danger col-lg-12" id="calendar-error-message">
                                <span>{% trans "Please select a Display, Display Group or Layout / Campaign to view the calendar" %}</span>
                            </div>
                            <div class="xibo-calendar-controls-container align-content-start justify-content-end col-xl-12 pl-0 form-inline text-right">
                                <div class="btn-group xibo-calendar-controls xibo-agenda-calendar-controls">
                                    <button type="button" class="btn btn-primary" data-calendar-nav="prev"><span
                                                class="fa fa-backward"></span> {% trans "Prev" %}</button>
                                    <button type="button" class="btn btn-white"
                                            data-calendar-nav="today">{% trans "Today" %}</button>
                                    <button type="button" class="btn btn-primary"
                                            data-calendar-nav="next">{% trans "Next" %} <span
                                                class="fa fa-forward"></span></button>
                                </div>
                                <div class="xibo-calendar-controls xibo-agenda-calendar-controls">
                                    <div class="inputgroup date calendar-date-picker-input" id="dateInput">
                                        <span class="btn btn-outline-dark date-open-button" role="button">
                                            <i class="fa fa-calendar"></i>
                                        </span>
                                        <input type="text" class="form-control" id="dateInputLink" data-input/>
                                    </div>
                                </div>
                                <div class="btn-group xibo-calendar-controls">
                                    {% if currentUser.featureEnabled("schedule.agenda") %}
                                        <button type="button" id="btn-agenda-view" class="btn btn-outline-info" data-calendar-view="agenda">{% trans "Agenda" %}</button>
                                    {% endif %}
                                    <button type="button" id="btn-month-view" class="btn btn-outline-info" data-calendar-view="month">{% trans "Back" %}</button>
                                </div>
                            </div>
                            <div class="text-center col-xl-12">
                                <h1 class="page-header"></h1>
                                <div class="calendar-loading">
                                    <span id="calendar-progress" class="fa fa-spin fa-cog"></span>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 cal-event-agenda-filter">
                                <!-- Time Slider -->
                                <div class="cal-event-time-bar">
                                    <div class="btn slider-step-btn time-picker-step-btn" data-step="-1">
                                        <span class="fa fa-step-backward"></span>
                                    </div>
                                    <input id="timePicker" type="text"
                                           data-slider-id='timePickerSlider'
                                           data-slider-min="0"
                                           data-slider-max="1439"
                                           data-slider-step="1"
                                           data-slider-value="0"
                                           data-slider-handle="square"
                                    />
                                    <div class="btn slider-step-btn time-picker-step-btn" data-step="1">
                                        <span class="fa fa-step-forward"></span>
                                    </div>
                                </div>

                                <!-- Geo location -->
                                <form class="form-inline cal-event-location">
                                    <button id="toggleMap" type="button" class="btn btn-primary pull-right"
                                            title="{% trans "Map" %}"><i class="fa fa-map"></i></button>
                                    <button id="getLocation" type="button" class="btn btn-white pull-right"
                                            title="{% trans "Get browser location!" %}"><i class="fa fa-map-marker"></i>
                                    </button>
                                    <button id="clearLocation" type="button" class="btn btn-white pull-right"
                                            title="{% trans "Clear coordinates!" %}"><i class="fa fa-times"></i>
                                    </button>
                                    <div class="form-group pull-right">
                                        <input type="email" class="form-control" id="geoLongitude"
                                               placeholder="Longitude">
                                    </div>
                                    <div class="form-group pull-right">
                                        <input type="text" class="form-control" id="geoLatitude" placeholder="Latitude">
                                    </div>
                                </form>

                                <!-- Geo location map -->
                                <div class="cal-event-location-map" data-default-lat="{{ defaultLat }}"
                                     data-default-long="{{ defaultLong }}">
                                    <div id="geoFilterAgendaMap" style="height: 400px; width: 100%"
                                         class="d-none"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div id="CalendarContainer" data-event-source="{{ url_for("schedule.calendar.data") }}"
                                 data-agenda-link="{{ url_for("schedule.events", {id: ':id'}) }}"
                                 data-calendar-type="{{ settings.CALENDAR_TYPE }}" class="col-sm-12">
                                <div class="calendar-view" id="Calendar"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="cal-legend">
                                    <ul>
                                        <li class="event-always"><span
                                                    class="fa fa-retweet"></span> {% trans "Always showing" %}</li>
                                        <li class="event-info"><span
                                                    class="fa fa-desktop"></span> {% trans "Single Display" %}</li>
                                        <li class="event-success"><span
                                                    class="fa fa-desktop"></span> {% trans "Multi Display" %}</li>
                                        <li class="event-important"><span
                                                    class="fa fa-bullseye"></span> {% trans "Priority" %}</li>
                                        <li class="event-special"><span
                                                    class="fa fa-repeat"></span> {% trans "Recurring" %}</li>
                                        <li class="event-inverse"><span
                                                    class="fa fa-lock"></span> {% trans "View Only" %}</li>
                                        <li class="event-command"><span
                                                    class="fa fa-wrench"></span> {% trans "Command" %}</li>
                                        <li class="event-interrupt"><span
                                                    class="fa fa-hand-paper"></span> {% trans "Interrupt" %}</li>
                                        <li class="event-geo-location"><span
                                                    class="fa fa-map-marker"></span> {% trans "Geo Location" %}</li>
                                        <li class="event-action"><span
                                                    class="fa fa-paper-plane "></span> {% trans "Interactive Action" %}
                                        </li>
                                        <li class="event-sync"><span
                                                    class="fa fa-refresh"></span> {% trans "Synchronised" %}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javaScriptTemplates %}
    {{ parent() }}

    {% verbatim %}
        <script type="text/x-handlebars-template" id="calendar-template-day">
            <div id="cal-day-box">
                <div class="row-fluid clearfix cal-row-head">
                    <div class="span1 col-1 cal-cell"><%= cal.locale.time %></div>
                    <div class="span11 col-11 cal-cell"><%= cal.locale.events %></div>
                </div>
                <% if(all_day.length) {%>
                <div class="row-fluid clearfix cal-day-hour">
                    <div class="span1 col-1"><b><%= cal.locale.all_day %></b></div>
                    <div class="span11 col-11">
                        <% _.each(all_day, function(event){ %>
                        <%
                        var eventTitle = (event.event.isAlways == 1) ? event.title : "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsDateFormat) + " - " + moment(event.scheduleEvent.toDt, systemDateFormat).format(jsDateFormat) + "] " + event.title;
                        %>
                        <div class="day-highlight dh-<%= event['class'] %>">
                            <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                               data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                               class="event-item">
                                <%= eventTitle %></a>
                        </div>
                        <% }); %>
                    </div>
                </div>
                <% }; %>
                <% if(before_time.length) {%>
                <div class="row-fluid clearfix cal-day-hour">
                    <div class="span1 col-3"><b><%= cal.locale.before_time %></b></div>
                    <div class="span5 col-5">
                        <% _.each(before_time, function(event){ %>
                        <div class="day-highlight dh-<%= event['class'] %>">
                            <span class="cal-hours pull-right"><%= event.end_hour %></span>
                            <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                               data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                               class="event-item">
                                <%= event.title %></a>
                        </div>
                        <% }); %>
                    </div>
                </div>
                <% }; %>
                <div id="cal-day-panel" class="clearfix">
                    <div id="cal-day-panel-hour">
                        <% for(i = 0; i < hours; i++){ %>
                        <div class="cal-day-hour">
                            <% for(l = 0; l < cal._hour_min(i); l++){ %>
                            <div class="row-fluid cal-day-hour-part">
                                <div class="span1 col-1"><b><%= cal._hour(i, l) %></b></div>
                                <div class="span11 col-11"></div>
                            </div>
                            <% }; %>
                        </div>
                        <% }; %>
                    </div>

                    <% _.each(by_hour, function(event){ %>
                    <div class="pull-left day-event <% if (event.lines < 1) { %>day-event-small<% } %> day-highlight dh-<%= event['class'] %>" style="margin-top: <%= (event.top * 30) %>px; height: <%= (event.lines * 30) %>px"
                    <% if (event.lines < 2) { %>data-toggle="popover" data-html="true" data-content="<a href='<%= event.url ? event.url : "javascript:void(0)" %>'><%= event.title %></a>" title="<%= event.start_hour %> - <%= event.end_hour %>"<% } %>
                    >
                    <span class="cal-hours"><%= event.start_hour %> - <%= event.end_hour %></span>
                    <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                       data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                       data-event-class="<%= event['class'] %>" class="event-item">
                        <%= event.title %></a>
                    </div>
                    <% }); %>
                </div>
            <% if(after_time.length) {%>
            <div class="row-fluid clearfix cal-day-hour">
                <div class="span1 col-3"><b><%= cal.locale.after_time %></b></div>
                <div class="span11 col-9">
                    <% _.each(after_time, function(event){ %>
                    <div class="day-highlight dh-<%= event['class'] %>">
                        <span class="cal-hours"><%= event.start_hour %></span>
                        <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                           data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                           data-event-class="<%= event['class'] %>" class="event-item">
                            <%= event.title %></a>
                    </div>
                    <% }); %>
                </div>
            </div>
            <% }; %>
            </div>
        </script>

        <script type="text/x-handlebars-template" id="calendar-template-events-list">
            <span id="cal-slide-tick" style="display: none"></span>
            <div id="cal-slide-content" class="cal-event-list">
                <ul class="unstyled list-unstyled">
                    <% _.each(events, function(event) { %>
                    <%
                    var title = event.title;
                    var eventIcon = "fa-desktop";
                    var eventClass = "event-warning";
                    var eventPriority = "";

                    if (event.event.isAlways != 1) {
                    if (event.event.eventTypeId == 2) {
                    title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsTimeFormat) + "] " + event.title;
                    } else if (event.sameDay) {
                    title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsTimeFormat) + " - " + moment(event.scheduleEvent.toDt, systemDateFormat).format(jsTimeFormat) + "] " + event.title;
                    } else {
                    title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsDateFormat) + " - " + moment(event.scheduleEvent.toDt, systemDateFormat).format(jsDateFormat) + "] " + event.title;
                    }
                    }

                    if (event.event.displayOrder > 0)
                    title = title + " (" + event.event.displayOrder + ")";

                    if (event.event.displayGroups.length <= 1) {
                    eventClass = "event-info";
                    }
                    else {
                    eventClass = "event-success";
                    }

                    if (event.event.isAlways == 1) {
                    eventIcon = "fa-retweet";
                    }

                    if (event.event.recurrenceType != null && event.event.recurrenceType != "") {
                    eventClass = "event-special";
                    eventIcon = "fa-repeat";
                    }

                    if (event.event.isPriority >= 1) {
                        eventClass = "event-important";
                        eventIcon = "fa-bullseye";
                        eventPriority = event.event.isPriority;
                    }

                    if (event.event.eventTypeId == 2) {
                        eventIcon = "fa-wrench";
                    }

                    if (event.event.eventTypeId == 4) {
                        eventIcon = "fa-hand-paper";
                    }

                    if (event.event.isGeoAware === 1) {
                        eventIcon = "fa-map-marker";
                    }

                    if (event.event.eventTypeId == 6) {
                        eventIcon = "fa-paper-plane";
                    }

                    if (event.event.eventTypeId == 9) {
                        eventIcon = "fa-refresh";
                    }

                    if (!event.editable) {
                    event.url = null;
                    eventIcon = "fa-lock";
                    eventClass = "event-inverse";
                    }
                    %>
                    <li>
                        <span class="pull-left event <%= event['class'] %>"></span>&nbsp;
                        <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                           data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                           data-event-class="<%= eventClass %>" class="event-item">
                            <span class="fa <%= eventIcon %>"><span class="event-priority"><%= eventPriority %></span></span> <%= title %></a>
                    </li>
                    <% }) %>
                </ul>
            </div>
        </script>

        <script type="text/x-handlebars-template" id="calendar-template-month">
            <div class="cal-row-fluid cal-row-head">
                <% _.each(days_name, function(name){ %>
                <div class="cal-cell1"><%= name %></div>
                <% }) %>
            </div>
            <div class="cal-month-box">
                <% for(i = 0; i < 6; i++) { %>
                <% if(cal.stop_cycling == true) break; %>
                <div class="cal-row-fluid cal-before-eventlist">
                    <div class="cal-cell1 cal-cell" data-cal-row="-day1"><%= cal._day(i, day++) %></div>
                    <div class="cal-cell1 cal-cell" data-cal-row="-day2"><%= cal._day(i, day++) %></div>
                    <div class="cal-cell1 cal-cell" data-cal-row="-day3"><%= cal._day(i, day++) %></div>
                    <div class="cal-cell1 cal-cell" data-cal-row="-day4"><%= cal._day(i, day++) %></div>
                    <div class="cal-cell1 cal-cell" data-cal-row="-day5"><%= cal._day(i, day++) %></div>
                    <div class="cal-cell1 cal-cell" data-cal-row="-day6"><%= cal._day(i, day++) %></div>
                    <div class="cal-cell1 cal-cell" data-cal-row="-day7"><%= cal._day(i, day++) %></div>
                </div>
                <% } %>
            </div>
        </script>

        <script type="text/x-handlebars-template" id="calendar-template-month-day">
            <div class="cal-month-day <%= cls %>">
                <span class="pull-right" data-cal-date="<%= data_day %>" data-cal-view="agenda" data-toggle="tooltip" title="<%= tooltip %>"><%= day %></span>

                <% if (events.length > 0) { %>
                    <span class="cal-month-day-number-events label label-info" data-toggle="tooltip" title="{% endverbatim %}{% trans "Number of events" %}{% verbatim %}"><%= events.length %></span>
                <% } %>

                <% if (events.length > 0) { %>
                <div class="events-list" data-cal-start="<%= start %>" data-cal-end="<%= end %>">
                    <% _.each(events, function(event) { %>
                    <%
                    var title = event.title;
                    var eventIcon = "fa-desktop";
                    var eventClass = "event-warning";
                    var eventPriority = "";

                    if (event.event.isAlways != 1) {
                    if (event.event.eventTypeId == 2) {
                    title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsTimeFormat) + "] " + event.title;
                    } else if (event.sameDay) {
                    title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsTimeFormat) + " - " + moment(event.scheduleEvent.toDt, systemDateFormat).format(jsTimeFormat) + "] " + event.title;
                    } else {
                    title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsDateFormat) + " - " + moment(event.scheduleEvent.toDt, systemDateFormat).format(jsDateFormat) + "] " + event.title;
                    }
                    }

                    if (event.event.displayOrder > 0)
                    title = title + " (" + event.event.displayOrder + ")";

                    if (event.event.displayGroups.length <= 1) {
                    eventClass = "event-info";
                    }
                    else {
                    eventClass = "event-success";
                    }

                    if (event.event.isAlways == 1) {
                    eventIcon = "fa-retweet";
                    }

                    if (event.event.recurrenceType != null && event.event.recurrenceType != "") {
                    eventClass = "event-special";
                    eventIcon = "fa-repeat";
                    }

                    if (event.event.isPriority >= 1) {
                        eventClass = "event-important";
                        eventIcon = "fa-bullseye";
                        eventPriority = event.event.isPriority;
                    }

                    if (event.event.eventTypeId == 2) {
                        eventIcon = "fa-wrench";
                    }

                    if (event.event.eventTypeId == 4) {
                        eventIcon = "fa-hand-paper";
                    }

                    if (event.event.isGeoAware === 1) {
                        eventIcon = "fa-map-marker";
                    }

                    if (event.event.eventTypeId == 6) {
                        eventIcon = "fa-paper-plane";
                    }

                    if (event.event.eventTypeId == 9) {
                        eventIcon = "fa-refresh";
                    }

                    if (!event.editable) {
                    event.url = null;
                    eventIcon = "fa-lock";
                    eventClass = "event-inverse";
                    }
                    %>
                    <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                       data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                       data-event-class="<%= eventClass %>"
                       class="pull-left event <%= eventClass %>" data-toggle="tooltip"
                       title="<%= event.title %>"><span class="fa <%= eventIcon %>"><span class="event-priority"><%= eventPriority %></span></span></a>
                    <% }); %>
                </div>
                <% } %>
            </div>
        </script>

        <script type="text/x-handlebars-template" id="calendar-template-week">
            <div class="cal-week-box">
                <div class="cal-offset1 cal-column"></div>
                <div class="cal-offset2 cal-column"></div>
                <div class="cal-offset3 cal-column"></div>
                <div class="cal-offset4 cal-column"></div>
                <div class="cal-offset5 cal-column"></div>
                <div class="cal-offset6 cal-column"></div>
                <div class="cal-row-fluid cal-row-head">
                    <% _.each(days_name, function(name) { %>
                    <div class="cal-cell1 <%= cal._getDayClass('week', start) %>" data-toggle="tooltip" title="<%= cal._getHolidayName(start) %>"><%= name %><br>
                        <small><span data-cal-date="<%= start.getFullYear() %>-<%= start.getMonthFormatted() %>-<%= start.getDateFormatted() %>" data-cal-view="day"><%= cal.options.type !== 'Jalali' ? start.getDate() : start.getJalaliDate() %> <%= cal.options.type !== 'Jalali' ? cal.locale['ms' + start.getMonth()] : cal.locale['jms' + (start.getJalaliMonth() - 1)] %></span></small>
                    </div>
                    <% start.setDate(start.getDate() + 1); %>
                    <% }) %>
                </div>
                <hr>
                <%= cal._week() %>
            </div>
        </script>

        <script type="text/x-handlebars-template" id="calendar-template-week-days">
            <% _.each(events, function(event){ %>
            <%
            var title = event.title;
            var eventIcon = "fa-desktop";
            var eventClass = "event-warning";
            var eventPriority = "";

            if (event.event.isAlways != 1) {
            if (event.event.eventTypeId == 2) {
            title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsTimeFormat) + "] " + event.title;
            } else if (event.sameDay) {
            title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsTimeFormat) + " - " + moment(event.scheduleEvent.toDt, systemDateFormat).format(jsTimeFormat) + "] " + event.title;
            } else {
            title = "[" + moment(event.scheduleEvent.fromDt, systemDateFormat).format(jsDateFormat) + " - " + moment(event.scheduleEvent.toDt, systemDateFormat).format(jsDateFormat) + "] " + event.title;
            }
            }

            if (event.event.displayOrder > 0)
            title = title + " (" + event.event.displayOrder + ")";

            if (event.event.displayGroups.length <= 1) {
            eventClass = "event-info";
            }
            else {
            eventClass = "event-success";
            }

            if (event.event.isAlways == 1) {
            eventIcon = "fa-retweet";
            }

            if (event.event.recurrenceType != null && event.event.recurrenceType != "") {
            eventClass = "event-special";
            eventIcon = "fa-repeat";
            }

            if (event.event.isPriority >= 1) {
                eventClass = "event-important";
                eventIcon = "fa-bullseye";
                eventPriority = event.event.isPriority;
            }

            if (event.event.eventTypeId == 4) {
                eventIcon = "fa-hand-paper";
            }

            if (event.event.isGeoAware === 1) {
                eventIcon = "fa-map-marker";
            }

            if (event.event.eventTypeId == 6) {
                eventIcon = "fa-paper-plane";
            }

            if (event.event.eventTypeId == 9) {
                eventIcon = "fa-refresh";
            }

            if (!event.editable) {
            event.url = null;
            eventIcon = "fa-wrench";
            eventClass = "event-inverse";
            }
            %>
            <div class="cal-row-fluid">
                <div class="cal-cell<%= event.days%> cal-offset<%= event.start_day %> day-highlight dh-<%= event['class'] %>">
                    <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                       data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                       data-event-class="<%= eventClass %>"
                       class="cal-event-week event<%= event.id %>"><span class="fa <%= eventIcon %>"><span class="event-priority"><%= eventPriority %></span></span> <%= title %></a>
                </div>
            </div>
            <% }); %>
        </script>

        <script type="text/x-handlebars-template" id="calendar-template-year">
            <div class="cal-year-box">
                <div class="row row-fluid cal-before-eventlist">
                    <div class="span3 col-md-3 cal-cell" data-cal-row="-month1"><%= cal._month(0) %></div>
                    <div class="span3 col-md-3 cal-cell" data-cal-row="-month2"><%= cal._month(1) %></div>
                    <div class="span3 col-md-3 cal-cell" data-cal-row="-month3"><%= cal._month(2) %></div>
                    <div class="span3 col-md-3 cal-cell" data-cal-row="-month4"><%= cal._month(3) %></div>
                </div>
                <div class="row row-fluid cal-before-eventlist">
                    <div class="span3 col-md-3 cal-cell" data-cal-row="-month1"><%= cal._month(4) %></div>
                    <div class="span3 col-md-3 cal-cell" data-cal-row="-month2"><%= cal._month(5) %></div>
                    <div class="span3 col-md-3 cal-cell" data-cal-row="-month3"><%= cal._month(6) %></div>
                    <div class="span3 col-md-3 cal-cell" data-cal-row="-month4"><%= cal._month(7) %></div>
                </div>
                <div class="row row-fluid cal-before-eventlist">
                    <div class="span3 col-md-3 cal-cell" data-cal-row="-month1"><%= cal._month(8) %></div>
                    <div class="span3 col-md-3 cal-cell" data-cal-row="-month2"><%= cal._month(9) %></div>
                    <div class="span3 col-md-3 cal-cell" data-cal-row="-month3"><%= cal._month(10) %></div>
                    <div class="span3 col-md-3 cal-cell" data-cal-row="-month4"><%= cal._month(11) %></div>
                </div>
            </div>
        </script>

        <script type="text/x-handlebars-template" id="calendar-template-year-month">
            <span class="pull-right" data-cal-date="<%= data_day %>" data-cal-view="month"><%= month_name %></span>
            <% if (events.length > 0) { %>
            <small class="cal-events-num badge badge-important pull-left"><%= events.length %></small>
            <div class="hide events-list" data-cal-start="<%= start %>" data-cal-end="<%= end %>">
                <% _.each(events, function(event) { %>
                <a href="<%= event.url ? event.url : 'javascript:void(0)' %>" data-event-id="<%= event.id %>"
                   data-event-start="<%= event.start %>" data-event-end="<%= event.end %>"
                   data-event-class="<%= event['class'] %>"
                   class="pull-left event <%= event['class'] %> event<%= event.id %>" data-toggle="tooltip"
                   title="<%= event.title %>"></a>
                <% }); %>
            </div>
            <% } %>
        </script>
        
        <script type="text/x-handlebars-template" id="calendar-template-agenda">
            
            <div class="container-fluid">
                
                <!-- Content panel with tabs -->
                <div class="card with-nav-tabs bg-white agenda-panel">
                
                    <!-- Tab Panel -->
                    <% if (typeof agenda.displayGroupList != 'undefined' && agenda.displayGroupList.length > 1) { %>
                        <div class="card-heading">
                                <ul class="nav nav-tabs">
                                    <% _.each(agenda.displayGroupList, function(displayGroup){ %>
                                        <% if (displayGroup['id'] == agenda.selectedDisplayGroup) { %>
                                            <li class="nav-item active">
                                        <% } else { %>
                                            <li class="nav-item">
                                        <% }; %>
                                        
                                            <%
                                                // If it is a simple display show an 
                                                var displayGroupIcon = "";
                                                if (displayGroup['isDisplaySpecific'] == 0)
                                                    displayGroupIcon = "<span class='fa fa-television'></span> ";
                                            %>
                                        
                                            <a class="nav-link" data-toggle="tab" data-id="<%= displayGroup['id'] %>" href="#tab_<%= displayGroup['id'] %>">
                                                <%= (displayGroupIcon + displayGroup['name']) %>
                                            </a>
                                        </li>
                                    <% }); %>
                                </ul> 
                        </div>
                    <% } %>
                
                    <!-- Tab Content -->
                    <div class="card-body p-1">
                    
                    <% if (agenda.errorMessage != '') { %>
                       {% endverbatim %}
    <!-- Request failed - Show Error Message -->
    <div class="text-danger text-center">
        <% if (agenda.errorMessage == 'display_not_selected') { %>
        <p>{% trans "Display not selected!" %}</p>
        <% } else if (agenda.errorMessage == 'all_displays_selected') { %>
        <p>{% trans "Show All option does not work for this filter, one or more specific Display/Display Group need to be selected!" %}</p>
        <% } else if (agenda.errorMessage == 'no_events') { %>
        <p>{% trans "No events for the chosen Display/Display Group on the selected date!" %}</p>
        <% } else if (agenda.errorMessage == 'request_failed') { %>
        <p>{% trans "Data request failed!" %}</p>
        <% } %>
    </div>
    {% verbatim %}
                   <% } else if(!jQuery.isEmptyObject(agenda.results)) { %>
                        <!-- Request successful - Show Data -->
                            
                        <!-- Breadcrumb trail -->
                        <div class="cal-event-breadcrumb-trail col-12">
                            <div id="content"></div>
                        </div>     
                        
                        <!-- Agenda Data Content -->
                        <div class="tab-content">
                            <% _.each(agenda.displayGroupList, function(displayGroup){ %>
                                <% if (typeof agenda.results[(displayGroup['id'])] != 'undefined') { %>
                                    <% 
                                        var resultItem = agenda.results[displayGroup['id']]; 
                                        var isActive = (displayGroup['id'] == agenda.selectedDisplayGroup) ? 'active' : '';
                                    %>
                                    <div id="tab_<%= displayGroup['id'] %>" class="tab-pane <%= isActive %> container-fluid">
                                        <div class="row">
                                            <% if(typeof resultItem.events != 'undefined') { %>
                                                <div class="col-lg-9 agenda-col">
                                                    <%= cal._layouts(resultItem.events, resultItem.layouts, 1) %>
                                                    <%= cal._layouts(resultItem.events, resultItem.layouts, 3) %>
                                                    <%= cal._layouts(resultItem.events, resultItem.layouts, 4) %>
                                                    <%= cal._layouts(resultItem.events, resultItem.layouts, 5) %>
                                                    <%= cal._layouts(resultItem.events, resultItem.layouts, 7) %>
                                                    <%= cal._layouts(resultItem.events, resultItem.layouts, 8) %>
                                                    <%= cal._layouts(resultItem.events, resultItem.layouts, 9) %>
                                                </div>
                                                <div class="col-lg-3 agenda-col">
                                                    <div class="row">
                                                        <div class="col-6 col-lg-12 agenda-col">
                                                            <%= cal._displaygroups(resultItem.events, resultItem.displayGroups) %>
                                                        </div> 
                                                        <div class="col-6 col-lg-12 agenda-col">
                                                            <%= cal._campaigns(resultItem.events, resultItem.campaigns) %>
                                                        </div>
                                                    </div>
                                                </div>
                                            <% } %>
                                        </div>
                                    </div>
                                <% } %>
                            <% }); %>
                        </div>
                    <% } %>   
                    </div>
                </div>
            </div>
        </script>
        
        <script type="text/x-handlebars-template" id="calendar-template-agenda-layouts">
            <table class="table agenda-table agenda-table-layouts" data-type="layouts" style="width: 100%;">
                <thead>
                    <tr class="table-title">
                     <% if (layouts.type == 4) { %>
                        <th colspan="11" class="pr-2">
                     <% } else { %>
                        <th colspan="10" class="pr-2">
                     <% } %>
                            <% if (layouts.type == 1) { %>
                                {% endverbatim %}{% trans "Layouts" %}{% verbatim %}</span>
                            <% } else if (layouts.type == 3) { %>
                                {% endverbatim %}{% trans "Overlay Layouts" %}{% verbatim %}
                            <% } else if (layouts.type == 4) { %>
                                {% endverbatim %}{% trans "Interrupt Layouts" %}{% verbatim %}
                            <% } else if (layouts.type == 5) { %>
                                {% endverbatim %}{% trans "Campaign Layouts" %}{% verbatim %}
                            <% } else if (layouts.type == 7) { %>
                                {% endverbatim %}{% trans "Full Screen Video/Image" %}{% verbatim %}</span>
                            <% } else if (layouts.type == 8) { %>
                                {% endverbatim %}{% trans "Full Screen Playlist" %}{% verbatim %}</span>
                            <% } else if (layouts.type == 9) { %>
                                {% endverbatim %}{% trans "Synchronised" %}{% verbatim %}</span>
                            <% } %>
                            
                            <span class="pull-right badge badge-light" title="{% endverbatim %}{% trans "Number of Layouts" %}{% verbatim %}" data-toggle="tooltip" data-placement="top">
                                <%= layouts.length %>
                            </span>
                        </th>
                    </tr>
                    {% endverbatim %}
    <tr>
        <th></th>
        <th>{% trans "ID" %}</th>
        <th>{% trans "Layout Name" %}</th>
        <th>{% trans "Status" %}</th>
        <th>{% trans "From Date" %}</th>
        <th>{% trans "To Date" %}</th>
        <th>{% trans "Layout Duration" %}</th>
        {% verbatim %}<% if (layouts.type == 4) { %>{% endverbatim %}
        <th>{% trans "Share of Voice" %}</th>
        {% verbatim %}<% } %>{% endverbatim %}
        <th>{% trans "Display Order" %}</th>
        <th>{% trans "Priority" %}</th>
        <th>{% trans "Visible" %}</th>
    </tr>
    {% verbatim %}
                </thead>
                <tbody>
                    <% _.each(layouts, function(layout){ %>
                        <tr 
                            class="<%= layout.itemClass %>"
                            data-elem-id="<%= layout.layoutId %>" 
                            data-event-id="<%= layout.eventId %>" 
                            data-toggle="tooltip"
                            <% if (layout.itemClass == 'low-priority') { %>
                                title="{% endverbatim %}{% trans "This layout will not be shown as there are higher priority layouts scheduled at this time" %}{% verbatim %}"
                            <% } %> 
                        >
                            <td><span class="fa <%= layout.itemIcon %>"></span></td>
                            <td><%= layout.layoutId %></td>
                            <td><%= layout.layoutName %></td>
                            <%
                                var icon = "";
                                if (layout.layoutStatus == 1)
                                    icon = "fa-check";
                                else if (layout.layoutStatus == 0)
                                    icon = "fa-times";
                                else if (layout.layoutStatus == 3)
                                    icon = "fa-cogs";
                                else
                                    icon = "fa-exclamation";
                            %>
                            <td><span class="fa <%= icon %>"></span></td>
                            <% if (layout.isAlways == 1) { %>
                                <td>{% endverbatim %}{% trans "Always" %}{% verbatim %}</td>
                                <td><span class="fa fa-retweet"></span></td>
                            <% } else { %> 
                                <td><%= layout.eventFromDt %></td>
                                <td><%= layout.eventToDt %></td>
                            <% } %> 
                            
                            <td><%= layout.layoutDuration %></td>
                            <% if (layouts.type == 4) { %>
                            <td><%= layout.shareOfVoice %></td>
                            <% } %>
                            <td><%= layout.layoutDisplayOrder %></td>
                            <td><%= layout.eventPriority %></td>
                            <%
                                var icon = "";
                                if (layout.itemClass == 'low-priority')
                                    icon = "fa-times";
                                else
                                    icon = "fa-check";
                            %>
                            <td><span class="fa <%= icon %>"></span></td>
                        </tr>
                    <% }); %>
                </tbody>
            </table>
        </script>

        <script type="text/x-handlebars-template" id="calendar-template-agenda-displaygroups">
            <table id="displaygroups" class="table agenda-table" data-type="displaygroups"  width="100%">
                {% endverbatim %}
    <thead>
    <tr class="table-title">
        <th colspan="3">{% trans "Display Groups" %}</th>
    </tr>
    <tr>
        <th></th>
        <th>{% trans "ID" %}</th>
        <th>{% trans "Name" %}</th>
    </tr>
    </thead>
    {% verbatim %}
                <tbody>
                    <% _.each(displaygroups, function(displaygroup){ %>
                        <tr data-elem-id="<%= displaygroup.displayGroupId %>">
                            <%
                                var icon = "";
                                if (displaygroup.isDisplaySpecific == 1)
                                    icon = "fa-television";
                            %>
                            <td><span class="fa <%= icon %>"></span></td>
                            <td><%= displaygroup.displayGroupId %></td>
                            <td><%= displaygroup.displayGroup %></td>
                        </tr>
                    <% }); %>
                </tbody>
            </table>
        </script>
        
        <script type="text/x-handlebars-template" id="calendar-template-agenda-campaigns">
            <table id="campaigns" class="table agenda-table" data-type="campaigns"  width="100%">
                {% endverbatim %}
    <thead>
    <tr class="table-title">
        <th colspan="4">{% trans "Campaigns" %}</th>
    </tr>
    <tr>
        <th></th>
        <th>{% trans "ID" %}</th>
        <th>{% trans "Name" %}</th>
        <th>{% trans "Cycle Playback?" %}</th>
    </tr>
    </thead>
    {% verbatim %}
                <tbody>
                    <% _.each(campaigns, function(campaign){ %>
                        <tr data-elem-id="<%= campaign.campaignId %>">
                            <td></td>
                            <td><%= campaign.campaignId %></td>
                            <td><%= campaign.campaign %></td>
                            <%
                                var icon = "";
                                if (campaign.cyclePlaybackEnabled == 0)
                                    icon = "fa-times";
                                else
                                    icon = "fa-check";
                            %>
                            <td><span class="fa <%= icon %>"></span></td>
                        </tr>
                    <% }); %>
                </tbody>
            </table>
        </script>
        
        <script type="text/x-handlebars-template" id="calendar-template-breadcrumb-trail">
            <!-- Layout -->
            <span>
                    <% if (layout.link != '') { %>
                      <a href="<%= layout.link %>"><%= layout.name %></a>
                    <% } else { %>
                      <%= layout.name %>
                    <% } %>
            </span>
            
            <span>&nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i>&nbsp;</span>
            
            <!-- Campaign -->
            <% if (typeof campaign != 'undefined') { %>
                <span>
                    <% if (campaign.link != '') { %>
                      <a href="<%= campaign.link %>"><%= campaign.name %></a>
                    <% } else { %>   
                      <%= campaign.name %>
                    <% } %> 
                </span>
                <span>&nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i>&nbsp;</span>
            <% } %> 
            
            <!-- Schedule -->
            <span>
                <a href="<%= schedule.link %>" class="XiboFormButton" data-event-start="<%= schedule.fromDt %>" data-event-end="<%= schedule.toDt %>">
                    {% endverbatim %}
    {% trans "Schedule" %}
    {% verbatim %}
                </a>
            </span>
            
            <!-- Display Groups -->
            <% _.each(displayGroups, function(displayGroup){ %>
                <span>&nbsp;<i class="fa fa-arrow-right" aria-hidden="true"></i>&nbsp;</span>
                <span>
                  <% if (displayGroup.link != '') { %>
                    <a href="<%= displayGroup.link %>"><%= displayGroup.name %></a>
                  <% } else { %>   
                    <%= displayGroup.name %>
                  <% } %> 
                </span>
            <% }); %>
            
        </script>

        <script type="text/x-handlebars-template" id="syncEventContentSelector">
        {{#each displays}}
            <tr>
                <td>{{displayId}} {{#eq displayId leadDisplayId}}{% endverbatim %}({% trans "Lead" %}){% verbatim %}{{/eq}}</td>
                <td>{{display}}</td>
                <td>
                   <div class="form-group pagedSelect">
                       <select class="form-control syncContentSelect single-select" name="layoutId_{{displayId}}" id="layoutId_{{displayId}}"{% endverbatim %} data-search-url="{{ url_for('layout.search') }}"{% verbatim %}
                       data-search-term="layout" data-width="100%" data-id-property="layoutId" data-text-property="layout" data-anchor-element="#contentSelectorTable"
                       data-initial-key="layoutId" data-initial-value="{{layoutId}}" data-display-id="{{displayId}}" data-lead-display-id="{{leadDisplayId}}">
                       <option></option>
                       </select>
                   </div>
                {{#eq displayId leadDisplayId}}
                <button data-display-id="{{displayId}}" id="setMirrorContent" type="button" class="btn btn-success d-none"
                 title="{% endverbatim %}{% trans "Set The same Layout on all displays?" %}{% verbatim %}">
                    {% endverbatim %}{% trans "Mirror" %}{% verbatim %}
                </button>
                {{/eq}}
                <input name="displayGroupIds[]" type="hidden" id="displayGroupIds[]" value="{{displayGroupId}}">
                </td>
            </tr>
        {{/each}}
        </script>
        {% endverbatim %}
{% endblock %}

{% block javaScript %}
    <script type="text/javascript">
      // We are using this variable in xibo-calendar.js
      var scheduleRecurrenceDeleteUrl = "{{ url_for("schedule.recurrence.delete.form", {id:':id'}) }}";
      var layoutPreviewUrl = "{{ url_for("layout.preview", {id: ':id'}) }}";

      $('.custom-date-range').addClass('d-none')

      // 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);
        }
      });

      // Init campaign select2
      $(function () {
        // Select lists
        var dialog = 'body';

        var $campaignSelect = $('#schedule-filter #campaignIdFilter');
        $campaignSelect.select2({
          dropdownParent: $(dialog),
          ajax: {
            url: $campaignSelect.data("searchUrl"),
            dataType: "json",
            delay: 250,
            placeholder: 'This is my placeholder',
            allowClear: true,
            data: function (params) {

              var query = {
                isLayoutSpecific: -1,
                retired: 0,
                totalDuration: 0,
                name: params.term,
                start: 0,
                length: 10,
                columns: [
                  {
                    data: 'isLayoutSpecific'
                  },
                  {
                    data: 'campaign'
                  }
                ],
                order: [
                  {
                    column: 0,
                    dir: 'asc'
                  },
                  {
                    column: 1,
                    dir: 'asc'
                  }
                ]
              };

              // Set the start parameter based on the page number
              if (params.page != null) {
                query.start = (params.page - 1) * 10;
              }

              return query;
            },
            processResults: function (data, params) {

              var results = [];
              var campaigns = [];
              var layouts = [];

              $.each(data.data, function (index, element) {
                if (element.isLayoutSpecific === 1) {
                  layouts.push({
                    id: element.campaignId,
                    text: element.campaign
                  });
                } else {
                  campaigns.push({
                    id: element.campaignId,
                    text: element.campaign
                  });
                }
              });

              if (campaigns.length > 0) {
                results.push({
                  text: $campaignSelect.data('transCampaigns'),
                  children: campaigns
                })
              }

              if (layouts.length > 0) {
                results.push({
                  text: $campaignSelect.data('transLayouts'),
                  children: layouts
                })
              }

              var page = params.page || 1;
              page = (page > 1) ? page - 1 : page;

              return {
                results: results,
                pagination: {
                  more: (page * 10 < data.recordsTotal)
                }
              }
            }
          }
        })
          .on('change', function (e) {
            // Refresh the calendar view
            setTimeout(calendar.view(), 1000);
          });

        // Set up our show all selector control
        $('#showAll, #eventTypeId, #recurring, #geoAware,' +
          ' #DisplayList, #DisplayGroupList,' +
          ' #name, #useRegexForName, #logicalOperatorName', dialog)
          .on('change', function () {
            setTimeout(calendar.view(), 1000);
          });
      });

      const table = $('#schedule-grid').DataTable({
        language: dataTablesLanguage,
        dom: dataTablesTemplate,
        serverSide: true,
        stateSave: true,
        responsive: true,
        stateDuration: 0,
        stateLoadCallback: dataTableStateLoadCallback,
        stateSaveCallback: dataTableStateSaveCallback,
        filter: false,
        searchDelay: 3000,
        order: [],
        ajax: {
          url: '{{ url_for("schedule.search") }}',
          data: function (d) {
            $.extend(d, $('#schedule-grid').closest('.XiboGrid').find('.FilterDiv form').serializeObject());
          }
        },
        columns: [
          {
            data: 'eventId',
            responsivePriority: 5,
            className: 'none',
          },
          {
            name: 'icon',
            className: 'align-middle',
            responsivePriority: 2,
            data: function (data) {
              var eventIcon = 'fa-desktop';
              var eventClass = 'event-warning';

              if (data.displayGroups.length <= 1) {
                eventClass = 'event-info';
              } else {
                eventClass = 'event-success';
              }

              if (data.isAlways == 1) {
                eventIcon = 'fa-retweet';
              }

              if (data.recurrenceType != null && data.recurrenceType != '') {
                eventClass = 'event-special';
                eventIcon = 'fa-repeat';
              }

              if (data.isPriority >= 1) {
                eventClass = 'event-important';
                eventIcon = 'fa-bullseye';
              }

              if (data.eventTypeId == 2) {
                eventIcon = 'fa-wrench';
              }

              if (data.eventTypeId == 4) {
                eventIcon = 'fa-hand-paper';
              }

              if (data.isGeoAware === 1) {
                eventIcon = 'fa-map-marker';
              }

              if (data.eventTypeId == 6) {
                eventIcon = 'fa-paper-plane';
              }

              if (data.eventTypeId == 9) {
                eventIcon = 'fa-refresh';
              }

              if (!data.isEditable) {
                eventIcon = 'fa-lock';
                eventClass = 'event-inverse';
              }

              return '<span class="fa ' + eventIcon + ' ' + eventClass + ' "></span>';
            }
          },
          {
            name: 'eventTypeId',
            className: 'align-middle',
            responsivePriority: 2,
            data: function (data) {
              return data.eventTypeName
            }
          },
          {
            data: 'name',
            className: 'align-middle',
            responsivePriority: 3,
          },
          {
            name: 'fromDt',
            className: 'align-middle',
            responsivePriority: 2,
            data: function (data) {
              if (data.isAlways === 1) {
                return '{{ "Always"|trans }}'
              } else {
                return moment(data.fromDt, 'X').format(jsDateFormat)
              }
            }
          },
          {
            name: 'toDt',
            className: 'align-middle',
            responsivePriority: 2,
            data: function (data) {
              if (data.isAlways === 1) {
                return '{{ "Always"|trans }}'
              } else {
                return moment(data.toDt, 'X').format(jsDateFormat)
              }
            }
          },
          {
            name: 'campaign',
            className: 'align-middle',
            responsivePriority: 2,
            data: function (data) {
              if (data.eventTypeId === 9) {
                return data.syncType;
              } else if (data.eventTypeId === 2) {
                return data.command;
              } else {
                return data.campaign;
              }
            }
          },
          {
            data: 'campaignId',
            responsivePriority: 5,
            className: 'none',
          },
          {
            name: 'displayGroups',
            className: 'align-middle',
            responsivePriority: 2,
            sortable: false,
            data: function (data) {
              if (data.displayGroups.length > 1 && data.eventTypeId !== 9) {
                return '<span class="badge" style="background-color: green; color: white" ' +
                  'data-toggle="popover" data-trigger="click" data-placement="top" ' +
                  'data-content="' + data.displayGroupList + '">' + (data.displayGroups.length) +
                  '</span>';
              } else {
                return data.displayGroupList
              }
            }
          },
          {
            data: 'shareOfVoice',
            className: 'align-middle',
            responsivePriority: 4,
          },
          {
            name: 'maxPlaysPerHour',
            className: 'align-middle',
            responsivePriority: 4,
            data: function (data) {
              if (data.maxPlaysPerHour === 0) {
                return translations.unlimited;
              } else {
                return data.maxPlaysPerHour;
              }
            }
          },
          {
            data: 'isGeoAware',
            className: 'align-middle',
            responsivePriority: 4,
            "render": dataTableTickCrossColumn,
          },
          {
            data: 'recurringEvent',
            className: 'align-middle',
            responsivePriority: 4,
            "render": dataTableTickCrossColumn,
          },
          {
            data: 'recurringEventDescription',
            className: 'align-middle',
            responsivePriority: 4,
            sortable: false,
          },
          {
            data: 'recurrenceType',
            className: 'align-middle',
            visible: false,
            responsivePriority: 4,
          },
          {
            data: 'recurrenceDetail',
            className: 'align-middle',
            visible: false,
            responsivePriority: 4,
          },
          {
            name: 'recurrenceRepeatsOn',
            className: 'align-middle',
            visible: false,
            responsivePriority: 4,
            data: function (data) {
              if (data.recurringEvent) {
                if (data.recurrenceType === 'Week') {
                  const daysOfTheWeek = [
                    '{% trans "Monday" %}',
                    '{% trans "Tuesday" %}',
                    '{% trans "Wednesday" %}',
                    '{% trans "Thursday" %}',
                    '{% trans "Friday" %}',
                    '{% trans "Saturday" %}',
                    '{% trans "Sunday" %}'
                  ];

                  let recurrenceArray = data.recurrenceRepeatsOn.split(',');

                  if (recurrenceArray.length >= 1) {
                    let stringToReturn = '';
                    // go through each selected day, get the corresponding day name
                    recurrenceArray.forEach((dayNumber, index) => {
                      stringToReturn += daysOfTheWeek[dayNumber - 1];
                      if (index < recurrenceArray.length - 1) {
                        stringToReturn += ' ';
                      }
                    })

                    return stringToReturn;
                  } else {
                    return '';
                  }
                } else if (data.recurrenceType === 'Month') {
                  return data.recurrenceMonthlyRepeatsOn
                } else {
                  return '';
                }
              } else {
                return '';
              }
            }
          },
          {
            name: 'recurrenceRange',
            className: 'align-middle',
            visible: false,
            responsivePriority: 4,
            data: function (data) {
              if (data.recurringEvent && data.recurrenceRange !== null) {
                return moment(data.recurrenceRange, 'X').format(jsDateFormat)
              } else {
                return ''
              }
            }
          },
          {
            data: 'isPriority',
            className: 'align-middle',
            responsivePriority: 2,
          },
          {
            data: 'createdOn',
            className: 'align-middle',
            responsivePriority: 4,
          },
          {
            data: 'updatedOn',
            className: 'align-middle',
            responsivePriority: 4,
          },
          {
            data: 'modifiedByName',
            className: 'align-middle',
            responsivePriority: 4,
          },
          {
            orderable: false,
            className: 'align-middle',
            responsivePriority: 1,
            data: dataTableButtonsColumn
          },
        ]
      });

      table.on('draw', function (e, settings) {
        dataTableDraw(e, settings);
        $('[data-toggle="popover"]').popover();
      });
      table.on('processing.dt', dataTableProcessing);
      dataTableAddButtons(table, $('#schedule-grid_wrapper').find('.dataTables_buttons'), true, true);
    </script>
{% endblock %}