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

{% block formTitle %}
    {% trans "Schedule Event" %}
{% endblock %}

{% block callBack %}setupScheduleForm{% endblock %}

{% set formId %}{% if addForm %}scheduleAddForm{% else %}scheduleEditForm{% endif %}{% endset %}

{% block formHtml %}
    <div class="row">
        <div class="col-md-12">
            {# Step links #}
            <div class="stepwizard mb-3" data-active="schedule-step-1">
                <div class="stepwizard-row">
                    <div class="stepwizard-step col-xs-3">
                        <a href="#schedule-step-1" type="button" class="btn btn-success btn-circle">1</a>
                        <p><small>{{ "Content"|trans }}</small></p>
                    </div>
                    <div class="stepwizard-step col-xs-3">
                        <a href="#schedule-step-2" type="button" class="btn btn-default btn-circle" {% if addForm %}disabled="disabled"{% endif %}>2</a>
                        <p><small>{{ "Displays"|trans }}</small></p>
                    </div>
                    <div class="stepwizard-step col-xs-3">
                        <a href="#schedule-step-3" type="button" class="btn btn-default btn-circle" {% if addForm %}disabled="disabled"{% endif %}>3</a>
                        <p><small>{{ "Time"|trans }}</small></p>
                    </div>
                    <div class="stepwizard-step col-xs-3">
                        <a href="#schedule-step-4" type="button" class="btn btn-default btn-circle" {% if addForm %}disabled="disabled"{% endif %}>4</a>
                        <p><small>{{ "Optional"|trans }}</small></p>
                    </div>
                </div>
            </div>

            {% set dayPartMessage %}{% trans "Select the start time for this event" %}{% endset %}
            {% set notDayPartMessage %}{% trans "Start and end time will be defined by the daypart's configuration for this day of the week. Use a repeating schedule to apply this event over multiple days" %}{% endset %}

            <form id="{{ formId }}" autocomplete="off" class="form-horizontal stepwizard-form"
                {% if addForm %}
                    method="post"
                    action="{{ url_for("schedule.add") }}"
                    data-open-step-2="{{ skipFirstStep }}"
                {% else %}
                    method="put"
                    action="{{ url_for("schedule.edit", {id: event.eventId}) }}"
                {% endif %}
                    data-event-id="{{ event.eventId }}"
                    data-event-start="{{ eventStart }}"
                    data-event-end="{{ eventEnd }}"
                    data-daypart-message="{{ dayPartMessage }}"
                    data-not-daypart-message="{{ notDayPartMessage }}"
                    data-add-url="{{ url_for("schedule.add") }}"
                    data-duplicated-message="{% trans "Duplicate form loaded, make adjustments and press save." %}"
                    data-default-lat="{{ defaultLat }}"
                    data-default-long="{{ defaultLong }}"
                    data-full-screen-url="{{ url_for('layout.add.full.screen.schedule') }}"
                    data-fetch-sync-displays="{{ url_for('syncgroup.fetch.displays', {id:':id'}) }}"
                    data-event-sync-group-id="{{ event.syncGroupId }}"
                    data-delete-url="{{ url_for("schedule.delete.form", {id: event.eventId}) }}"
                    data-set-displays-from-grid-filters="{{ setDisplaysFromFilter }}">

                    {# Step 1 - Content #}
                    <div class="panel panel-default stepwizard-content" id="schedule-step-1" data-step="1" data-next="schedule-step-2" data-previous="start">
                        {% if hideEventType %}
                            {{ forms.hidden("eventTypeId", event.eventTypeId) }}
                        {% else %}
                            {% set title %}{% trans "Event Type" %}{% endset %}
                            {% set helpText %}{% trans "Select the type of event to schedule" %}{% endset %}
                            {{ forms.dropdown("eventTypeId", "single", title, event.eventTypeId, eventTypes, "eventTypeId", "eventTypeName", helpText) }}
                        {% endif %}

                        {# Campaign / Layout list. We want to build two arrays for us to use. #}
                        {% set attributes = [
                            { name: "data-search-url", value:  url_for("campaign.search") ~ "?type=list" },
                            { name: "data-search-is-layout-specific", value: -1 },
                            { name: "data-trans-layout", value: "Layout"|trans },
                            { name: "data-trans-layout-help-text", value: "Please select a Layout for this Event to show"|trans },
                            { name: "data-trans-campaign", value: "Campaign"|trans },
                            { name: "data-trans-campaign-help-text", value: "Please select a Campaign for this Event to show"|trans },
                            { name: "data-search-term", value: "campaign" },
                            { name: "data-id-property", value: "campaignId" },
                            { name: "data-text-property", value: "campaign" },
                            { name: "data-selected-property", value: "selected" },
                            { name: "data-additional-property", value: "hasFullScreenLayout" },
                            { name: "data-initial-key", value: "campaignId"},
                            { name: "data-initial-value", value: (event.campaignId is not empty ? event.campaignId : event.getUnmatchedProperty("campaignId")) }                 
                        ] %}
                        {% set title %}{% if fromCampaign %}{% trans "Campaign" %}{% else %}{% trans "Layout" %}{% endif %}{% endset %}
                        {% set helpText %}{% trans "Please select a Layout for this Event to show" %}{% endset %}
                        {{ forms.dropdown("campaignId", "single", title, event.campaignId, [campaign], "campaignId", "campaign", helpText, "layout-control pagedSelect", "", "", "", attributes, "", "", "", readonlySelect) }}

                        {# Image/Video #}
                        {% set attributes = [
                            { name: "data-width", value: "100%" },
                            { name: "data-search-url", value: url_for('library.search') ~ "?fullScreenScheduleCheck=true&types[]=image&types[]=video" },
                            { name: "data-search-term", value: "media" },
                            { name: "data-id-property", value: "mediaId" },
                            { name: "data-text-property", value: "name" },
                            { name: "data-selected-property", value: "selected" },
                            { name: "data-additional-property", value: "hasFullScreenLayout" },
                            { name: "data-initial-key", value: "mediaId"},
                            { name: "data-initial-value", value: (mediaId is not empty ? mediaId : event.getUnmatchedProperty("mediaId")) }
                        ] %}
                        {% set title %}{% trans "Media" %}{% endset %}
                        {% set helpText %}{% trans "Select a Media file from the Library to use. The selected file will be shown full screen for this event." %}{% endset %}
                        {{ forms.dropdown("mediaId", "single", title, "", null, "mediaId", "name", helpText, "media-control full-screen-control pagedSelect", "", "d", "", attributes) }}

                        {# Playlist #}
                        {% set attributes = [
                            { name: "data-width", value: "100%" },
                            { name: "data-search-url", value: url_for("playlist.search") ~ "?fullScreenScheduleCheck=true" },
                            { name: "data-search-term", value: "name" },
                            { name: "data-id-property", value: "playlistId" },
                            { name: "data-text-property", value: "name" },
                            { name: "data-selected-property", value: "selected" },
                            { name: "data-additional-property", value: "hasFullScreenLayout" },
                            { name: "data-initial-key", value: "playlistId"},
                            { name: "data-initial-value", value: (playlistId is not empty ? playlistId : event.getUnmatchedProperty("playlistId")) }
                        ] %}
                        {% set title %}{% trans "Playlist" %}{% endset %}
                        {% set helpText %}{% trans "Select a Playlist to use. The selected playlist will be shown full screen for this event." %}{% endset %}
                        {{ forms.dropdown("playlistId", "single", title, "", null, "playlistId", "name", helpText, "playlist-control full-screen-control pagedSelect", "", "d", "", attributes) }}

                        <div style="{% if not (currentUser.featureEnabled('campaign.view') or currentUser.featureEnabled('layout.view')) %}display: none;{% endif %}">
                            <div class="form-group row preview-button-container">
                                <div class="offset-md-2 col-md-10">
                                    <a id="previewButton" class="btn btn-success" target="_blank" data-url="{{ url_for("campaign.preview", {id: ':id'}) }}">{% trans "Preview" %} <span class="fa fa-tablet"></span></a>
                                    <small class="form-text text-muted">{% trans "Preview your selection in a new tab" %}</small>
                                </div>
                            </div>
                        </div>

                        {% set title %}{% trans "Sync Group" %}{% endset %}
                        {% set helpText %}{% trans "Please select existing Sync Group" %}{% endset %}
                        {% set attributes = [
                            { name: "data-width", value: "100%" },
                            { name: "data-search-url", value: url_for("syncgroup.search") ~ "?hasLeadDisplay=1" },
                            { name: "data-search-term", value: "name" },
                            { name: "data-id-property", value: "syncGroupId" },
                            { name: "data-text-property", value: "name" },
                            { name: "data-initial-key", value: "syncGroupId"},
                            { name: "data-initial-value", value: event.syncGroupId}
                        ] %}
                        {{ forms.dropdown("syncGroupId", "single", title, "", null, "syncGroupId", "name", helpText, "pagedSelect sync-group-control", "", "", "", attributes) }}

                        <div id="content-selector" class="form-group col-sm-12 sync-group-content-selector" style="display: none; max-height: 40vh; overflow-y: auto">
                            <div class="XiboData card">
                                <table id="contentSelectorTable" class="table table-striped">
                                    <thead>
                                    <tr>
                                        <th>{% trans "ID" %}</th>
                                        <th>{% trans "Name" %}</th>
                                        <th>{% trans "Layout" %}</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                        </div>

                        {% set title %}{% trans "Action Type" %}{% endset %}
                        {% set helpText %}{% trans "Please select action Type" %}{% endset %}
                        {% set navLayout %}{% trans "Navigate to Layout" %}{% endset %}
                        {% set command %}{% trans "Command" %}{% endset %}
                        {% set options = [
                            { typeid: "navLayout", type: navLayout },
                            { typeid: "command", type: command },
                        ] %}
                        {{ forms.dropdown("actionType", "single", title, event.actionType, options, "typeid","type", helpText, 'action-control') }}

                        {% set title %}{% trans "Trigger Code" %}{% endset %}
                        {% set helpText %}{% trans "Web hook trigger code for this Action" %}{% endset %}
                        {{ forms.input("actionTriggerCode", title, event.actionTriggerCode, helpText, 'action-control') }}

                        {% set title %}{% trans "Layout Code" %}{% endset %}
                        {% set helpText %}{% trans "Please select the Code identifier for the Layout that Player should navigate to when this Action is triggered." %}{% endset %}

                        {% set attributes = [
                            { name: "data-width", value: "100%" },
                            { name: "data-search-url", value: url_for("layout.code.search") },
                            { name: "data-search-term", value: "code" },
                            { name: "data-id-property", value: "code" },
                            { name: "data-text-property", value: "code" },
                            { name: "data-initial-key", value: "code" },
                            { name: "data-initial-value", value: event.actionLayoutCode },
                        ] %}
                        {{ forms.dropdown("actionLayoutCode", "single", title, "", null, "code", "code", helpText, "pagedSelect action-control layout-code-control", "", "", "", attributes) }}

                        {% set title %}{% trans "Command" %}{% endset %}
                        {% set helpText %}{% trans "Please select a command for this Event." %}{% endset %}
                        {% set attributes = [
                            { name: "data-width", value: "100%" },
                            { name: "data-search-url", value: url_for("command.search") },
                            { name: "data-search-term", value: "command" },
                            { name: "data-id-property", value: "commandId" },
                            { name: "data-text-property", value: "command" },
                            { name: "data-initial-key", value: "commandId" },
                            { name: "data-initial-value", value: event.commandId },
                        ] %}
                        {{ forms.dropdown("commandId", "single", title, "", null, "commandId", "command", helpText, "pagedSelect command-control", "", "", "", attributes) }}

                        {% set title %}{% trans "DataSet" %}{% endset %}
                        {% set helpText %}{% trans "Please select the real time DataSet related to this Data Connector event" %}{% endset %}

                        {% set attributes = [
                            { name: "data-width", value: "100%" },
                            { name: "data-search-url", value: url_for("dataSet.search") ~ "?isRealTime=1" },
                            { name: "data-search-term", value: "dataSet" },
                            { name: "data-id-property", value: "dataSetId" },
                            { name: "data-text-property", value: "dataSet" },
                            { name: "data-initial-key", value: "dataSetId" },
                            { name: "data-initial-value", value: event.dataSetId },
                        ] %}
                        {{ forms.dropdown("dataSetId", "single", title, "", event.dataSetId, "dataSetId", "dataSet", helpText, "pagedSelect data-connector-control", "", "", "", attributes) }}

                        {% set title %}{% trans "Data Connector Parameters" %}{% endset %}
                        {% set helpText %}{% trans "Optionally provide any parameters to be used by the Data Connector." %}{% endset %}
                        {{ forms.input("dataSetParams", title, event.dataSetParams, helpText, 'data-connector-control') }}
                    </div>

                    {# Step 2 - Displays #}
                    <div class="panel panel-default stepwizard-content" style="display:none;" id="schedule-step-2" data-step="2" data-next="schedule-step-3" data-previous="schedule-step-1">
                        {% set title %}{% trans "Display" %}{% endset %}
                        {% set helpText %}{% trans "Please select one or more displays / groups for this event to be shown on." %}{% endset %}
                        {% set attributes = [
                            { name: "data-search-url", value:  url_for("displayGroup.search") },
                            { name: "data-trans-groups", value:  "Groups"|trans },
                            { name: "data-trans-display", value:  "Display"|trans },
                            { name: "data-initial-key", value: "displayGroupIds[]"},
                            { name: "data-id-property", value: "displayGroupId"},
                            { name: "data-text-property", value: "displayGroup"}
                        ] %}
                        {{ forms.dropdown("displayGroupIds[]", "dropdownmulti", title, displayGroupIds, displayGroups, "displayGroupId", "displayGroup", helpText, "display-group-control", "", "", "", attributes) }}

                        <div class="alert alert-info sync-group-control">{% trans %}For Synchronized event, displays are selected on the Content step.{% endtrans %}</div>
                    </div>

                    {# Step 3 - Time #}
                    <div class="panel panel-default stepwizard-content" style="display:none;" id="schedule-step-3" data-step="3" data-next="schedule-step-4" data-previous="schedule-step-2">
                        {% set title %}{% trans "Dayparting" %}{% endset %}
                        {% set helpText %}{% trans "Select the dayparting information for this event. To set your own times select custom and to have the event run constantly select Always." %}{% endset %}
                        <div class="form-group row day-part-control">
                            <label class="col-sm-2 control-label" for="dayPartId">{{ title }}</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="dayPartId" id="dayPartId">
                                    {% for dayPart in dayParts %}
                                        <option {% if dayPart.dayPartId == event.dayPartId or (not event.dayPartId and dayPart.isCustom == 2) %}selected{% endif %}
                                                value="{{ dayPart.dayPartId }}"
                                                data-is-always="{{ dayPart.isAlways }}"
                                                data-is-custom="{{ dayPart.isCustom }}">{{ dayPart.name }}</option>
                                    {% endfor %}
                                </select>
                                <small class="form-text text-muted">{{ helpText }}</small>
                            </div>
                        </div>

                        {% set title %}{% trans "Start Time" %}{% endset %}
                        {% set helpText %}{% trans "Select the start time for this event" %}{% endset %}
                        {{ forms.dateTime("fromDt", title, event.fromDt, helpText, "starttime-control", "required", "") }}

                        {% set title %}{% trans "End Time" %}{% endset %}
                        {% set helpText %}{% trans "Select the end time for this event" %}{% endset %}
                        {{ forms.dateTime("toDt", title, event.toDt, helpText, "endtime-control", "required", "") }}

                        {% set title %}{% trans "Use Relative time?" %}{% endset %}
                        {% set helpText %}{% trans "Switch between relative time inputs and Date pickers for start and end time." %}{% endset %}
                        {{ forms.checkbox("relativeTime", title, relativeTime, helpText, 'relative-time-checkbox') }}

                        {% set title %}{% trans "Hours" %}{% endset %}
                        {% set helpText %}{% trans "Hours this event should be scheduled for" %}{% endset %}
                        {{ forms.number("hours", title, "", helpText, "duration-part relative-time-control") }}

                        {% set title %}{% trans "Minutes" %}{% endset %}
                        {% set helpText %}{% trans "Minutes this event should be scheduled for" %}{% endset %}
                        {{ forms.number("minutes", title, "", helpText, "duration-part relative-time-control") }}

                        {% set title %}{% trans "Seconds" %}{% endset %}
                        {% set helpText %}{% trans "Seconds this event should be scheduled for" %}{% endset %}
                        {{ forms.number("seconds", title, "", helpText, "schedule-now-seconds-field duration-part relative-time-control") }}

                        {% set messageNoSyncTimezone %}{% trans %}Your event will be scheduled from [fromDt] to [toDt] in each of your selected Displays respective timezones{% endtrans %}{% endset %}
                        {% set messageSyncTimezone %}{% trans %}Your event will be scheduled from [fromDt] to [toDt] in the CMS timezone, please check this covers each of your Displays in their respective timezones.{% endtrans %}{% endset %}
                        <div class="alert alert-info scheduleNowMessage d-none relative-time-control" data-template-sync="{{ messageSyncTimezone }}" data-template-no-sync="{{ messageNoSyncTimezone }}"></div>

                        <div class="form-group row interrupt-control">
                            <label class="col-sm-2 control-label" for="shareOfVoice" accesskey="">{% trans "Share of Voice" %}</label>
                            <div class="col-sm-5">
                                <input class="form-control" name="shareOfVoice" type="number" id="shareOfVoice" value="{{ event.shareOfVoice }}" min="0" max="3600" step="1">
                                <small class="form-text text-muted">{% trans "The amount of time this Layout should be shown, in seconds per hour." %}</small>
                            </div>

                            <div class="col-sm-5">
                                <input class="form-control" name="shareOfVoicePercentage" type="number" id="shareOfVoicePercentage" value="">
                                <small class="form-text text-muted">{% trans "As a percentage" %}</small>
                            </div>
                        </div>
                    </div>

                    {# Step 4 - Optional #}
                    <div class="panel panel-default stepwizard-content" style="display:none;" id="schedule-step-4" data-step="4" data-next="finished" data-previous="schedule-step-3">
                        <ul class="nav nav-tabs" role="tablist">
                            <li class="nav-item"><a class="nav-link active" href="#general" role="tab" data-toggle="tab"><span>{% trans "General" %}</span></a></li>
                            <li class="nav-item repeats"><a class="nav-link" href="#repeats" role="tab" data-toggle="tab"><span>{% trans "Repeats" %}</span></a></li>
                            {% if currentUser.featureEnabled("schedule.reminders") %}
                                <li class="nav-item reminders"><a class="nav-link" href="#reminders" role="tab" data-toggle="tab"><span>{% trans "Reminder" %}</span></a></li>
                            {% endif %}
                            {% if currentUser.featureEnabled("schedule.geoLocation") %}
                                <li class="nav-item geoSchedule"><a class="nav-link" href="#geoSchedule" role="tab" data-toggle="tab"><span>{% trans "Geo Location" %}</span></a></li>
                            {% endif %}
                            {% if currentUser.featureEnabled("schedule.criteria") %}
                                <li class="nav-item criteria"><a class="nav-link" href="#tab-criteria" role="tab" data-toggle="tab"><span>{% trans "Criteria" %}</span></a></li>
                            {% endif %}
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="general">
                                {% set title %}{% trans "Name" %}{% endset %}
                                {% set helpText %}{% trans "Optional Name for this Event (1-50 characters)" %}{% endset %}
                                {{ forms.input("name", title, event.name, helpText) }}

                                {% set title %}{% trans "Duration in loop" %}{% endset %}
                                {% set helpText %}{% trans "Set how long this item should be shown each time it appears in the schedule. Leave blank to use the Media Duration set in the Library." %}{% endset %}
                                {{ forms.number("layoutDuration", title, event.layoutDuration, helpText, "media-control-option hidden") }}

                                {% set attributes = [
                                    { name: "data-width", value: "100%" },
                                    { name: "data-search-url", value: url_for("resolution.search") },
                                    { name: "data-search-term", value: "media" },
                                    { name: "data-id-property", value: "resolutionId" },
                                    { name: "data-text-property", value: "resolution" },
                                    { name: "data-additional-property", value: "hasFullScreenLayout" },
                                    { name: "data-initial-key", value: "resolutionId"},
                                    { name: "data-initial-value", value: event.resolutionId }
                                ] %}
                                {% set title %}{% trans "Resolution" %}{% endset %}
                                {% set helpTextMedia %}{% trans "Optionally select a Resolution to use for the selected Media. Leave blank to match with an existing Resolution closest in size to the selected media." %}{% endset %}
                                {% set helpTextPlaylist %}{% trans "Optionally select a Resolution to use for the selected Media. Leave blank to match with an existing Resolution closest in size to the selected media." %}{% endset %}
                                {{ forms.dropdown("resolutionId", "single", title, "", null, "resolutionId", "resolution", helpTextMedia, "fs-control-option pagedSelect hidden", "", "d", "", attributes) }}

                                {% set title %}{% trans "Background Colour" %}{% endset %}
                                {% set helpText %}{% trans "Optionally set a colour to use as a background for if the item selected does not fill the entire screen." %}{% endset %}
                                {{ forms.colorPicker("backgroundColor", title, event.backgroundColor, helpText, "fs-control-option hidden") }}

                                {% set title %}{% trans "Display Order" %}{% endset %}
                                {% set helpText %}{% trans "Please select the order this event should appear in relation to others when there is more than one event scheduled" %}{% endset %}
                                {{ forms.number("displayOrder", title, event.displayOrder, helpText, 'displayOrder-control', "", "", "", "0") }}

                                {% set title %}{% trans "Priority" %}{% endset %}
                                {% set helpText %}{% trans "Sets the event priority - events with the highest priority play in preference to lower priority events." %}{% endset %}
                                {{ forms.number("isPriority", title, event.isPriority, helpText, 'priority-control', "", "", "", "0") }}

                                {% set title %}{% trans "Maximum plays per hour" %}{% endset %}
                                {% set helpText %}{% trans "Limit the number of times this event will play per hour on each display. For unlimited plays set to 0." %}{{ forms.playerCompat("R308", "", "", "", "R306", "") }}{% endset %}
                                {{ forms.number("maxPlaysPerHour", title, event.maxPlaysPerHour, helpText, 'max-plays-control', "", "", "", "0") }}

                                {% set title %}{% trans "Run at CMS Time?" %}{% endset %}
                                {% set helpText %}{% trans "When selected, your event will run according to the timezone set on the CMS, otherwise the event will run at Display local time" %}{% endset %}
                                {{ forms.checkbox("syncTimezone", title, event.syncTimezone, helpText) }}

                                {% if recurringEvent %}
                                    <div class="card p-3 mb-3 bg-light text-primary text-center form-error">
                                        <p>This is an instance of a scheduled recurring event:
                                            <span class="fa fa-info-circle"
                                                data-toggle="popover"
                                                data-trigger="hover"
                                                data-placement="bottom"
                                                data-content="{% trans "Editing the Start and or End date/time will create a new Recurring Event across the Schedule. Any previously deleted instances of this event will be recreated with edits made here." %}"></span></p>
                                        <p>
                                            Starting from <span class="text-warning"><b id="instanceStartDate">-</b></span> to <span class="text-warning"><b id="instanceEndDate">-</b></span>
                                        </p>
                                        <div id="recurringInfo"></div>
                                    </div>
                                {% endif %}
                            </div>

                            <div class="tab-pane" id="repeats">
                                {% set title %}{% trans "Repeats" %}{% endset %}
                                {% set helpText %}{% trans "Select the type of Repeat required for this Event." %}{% endset %}
                                {% set noneOption %}{% trans "None" %}{% endset %}
                                {% set minute %}{% trans "Per Minute" %}{% endset %}
                                {% set hourly %}{% trans "Hourly" %}{% endset %}
                                {% set daily %}{% trans "Daily" %}{% endset %}
                                {% set weekly %}{% trans "Weekly" %}{% endset %}
                                {% set monthly %}{% trans "Monthly" %}{% endset %}
                                {% set yearly %}{% trans "Yearly" %}{% endset %}
                                {% set options = [
                                    { id: "", name: noneOption },
                                    { id: "Minute", name: minute },
                                    { id: "Hour", name: hourly},
                                    { id: "Day", name: daily},
                                    { id: "Week", name: weekly},
                                    { id: "Month", name: monthly},
                                    { id: "Year", name: yearly}
                                ] %}
                                {{ forms.dropdown("recurrenceType", "single", title, event.recurrenceType, options, "id", "name", helpText) }}

                                {% set helpText %}{% trans "Use the drop-down to select which days of the week this Event should be repeated" %}{% endset %}
                                {% set monday %}{% trans "Monday" %}{% endset %}
                                {% set tuesday %}{% trans "Tuesday" %}{% endset %}
                                {% set wednesday %}{% trans "Wednesday" %}{% endset %}
                                {% set thursday %}{% trans "Thursday" %}{% endset %}
                                {% set friday %}{% trans "Friday" %}{% endset %}
                                {% set saturday %}{% trans "Saturday" %}{% endset %}
                                {% set sunday %}{% trans "Sunday" %}{% endset %}
                                {% set options = [
                                    { id: 1, name: monday },
                                    { id: 2, name: tuesday },
                                    { id: 3, name: wednesday },
                                    { id: 4, name: thursday },
                                    { id: 5, name: friday },
                                    { id: 6, name: saturday },
                                    { id: 7, name: sunday },
                                ] %}
                                {{ forms.dropdown("recurrenceRepeatsOn[]", "dropdownmulti", "", event.recurrenceRepeatsOn, options, "id", "name", helpText, "repeat-weekly-control-group") }}

                                {% set helpText %}{% trans "Should this Event Repeat by Day of the month (eg. Monthly on Day 21) or by a Weekday in the month (eg. Monthly on the third Thursday)" %}{% endset %}
                                {% set attributes = [
                                    { name: "data-value", value: event.recurrenceMonthlyRepeatsOn },
                                    { name: "data-trans-day", value: "on the [DAY] day"|trans },
                                    { name: "data-trans-weekday", value: "on the [POSITION] [WEEKDAY]"|trans }
                                ] %}
                                {{ forms.dropdown("recurrenceMonthlyRepeatsOn", "single", "", event.recurrenceMonthlyRepeatsOn, [{id: event.recurrenceMonthlyRepeatsOn, name: ""}], "id", "name", helpText, "repeat-monthly-control-group", "", "", "", attributes) }}

                                {% set title %}{% trans "Every" %}{% endset %}
                                {% set helpText %}{% trans "Include a number to determine the Repeat frequency required for this Event." %}{% endset %}
                                <div class="form-group row repeat-control-group">
                                    <label class="col-sm-2 control-label" for="recurrenceDetail">{{ title }}</label>
                                    <div class="col-sm-10">
                                        <div class="input-group">
                                            <input class="form-control" name="recurrenceDetail" min="0" type="number" id="recurrenceDetail" value="{{ event.recurrenceDetail }}" />
                                            <div class="input-group-append">
                                                <span class="input-group-text input-group-addon"></span>
                                            </div>
                                        </div>
                                        <span class="form-text text-muted">{{ helpText }}</span>
                                    </div>
                                </div>

                                {% set title %}{% trans "Until" %}{% endset %}
                                {% set helpText %}{% trans "Provide a date and time to end the Repeat for this Event. Leave empty to Repeat indefinitely." %}{% endset %}
                                {{ forms.dateTime("recurrenceRange", title, event.recurrenceRange, helpText, "repeat-control-group", "", "") }}
                            </div>

                            <div class="tab-pane" id="reminders">
                                {% set message %}{% trans "Use the form fields below to create a set of reminders for this event. New fields can be added by clicking on the + icon at the end of the row. Use the tick box to receive a notification by email alternatively reminders will be shown in the message center." %}{% endset %}
                                {{ forms.message(message) }}
                                <div id="reminderFields" data-reminders="{{ reminders|json_encode }}"></div>
                            </div>

                            <div class="tab-pane" id="geoSchedule">
                                {% set title %}{% trans "Geo Schedule?" %}{% endset %}
                                {% set helpText %}{% trans "Should this event be location aware? Enable this checkbox and select an area by drawing a polygon or rectangle layer on the map below." %}{% endset %}
                                {{ forms.checkbox("isGeoAware", title, event.isGeoAware, helpText, "") }}

                                <div id="geoScheduleMap" style="height: 500px; width: 100%" class="d-none"></div>

                                {{ forms.hidden("geoLocation", event.geoLocation) }}
                            </div>

                            <div class="tab-pane" id="tab-criteria">
                                {% set message %}{% trans "Set criteria to determine when this event is active. All conditions must be true for an event to be included in the schedule loop. Events without criteria are always active." %}{% endset %}
                                {{ forms.message(message) }}

                                <div class="form-criteria-field-headings">
                                    <div class="form-group schedule-criteria-row">
                                        <div class="col-form-label schedule-criteria-cell schedule-criteria-type">{{ "Type"|trans }}</div>
                                        <div class="col-form-label schedule-criteria-cell schedule-criteria-metric">{{ "Metric"|trans }}</div>
                                        <div class="col-form-label schedule-criteria-cell schedule-criteria-condition">{{ "Condition"|trans }}</div>
                                        <div class="col-form-label schedule-criteria-cell schedule-criteria-value">{{ "Value"|trans }}</div>
                                    </div>
                                </div>

                                <div id="scheduleCriteriaFields" data-criteria="{{ event.criteria|json_encode }}" data-schedule-criteria="{{ scheduleCriteria|json_encode|e('html_attr') }}" data-criteria-default-condition="{{ criteriaDefaultCondition|json_encode|e('html_attr') }}"></div>
                            </div>
                        </div>
                    </div>
            </form>
        </div>
    </div>
{% endblock %}