{% load custom_tags_and_filters %}
<div class="panel-body">
    <h3 class="customization-section-title">Calendar settings</h3>
    <form method="POST" action="{% url 'customize' 'calendar' %}" class="form-horizontal">
        {% csrf_token %}
        <div class="form-group">
            <label class="control-label col-md-3">Default event view</label>
            <div class="col-md-9">
                <div class="radio">
                    <label>
                        <input type="radio"
                               id="calendar_default_event_view"
                               name="calendar_default_event_view"
                               {% if not calendar_default_event_view or calendar_default_event_view == 'reservations' %}checked{% endif %}
                               value="reservations">
                        Reservations
                    </label>
                    <label>
                        <input type="radio"
                               id="calendar_default_event_view"
                               name="calendar_default_event_view"
                               {% if calendar_default_event_view == 'usage' %}checked{% endif %}
                               value="usage">
                        {{ facility_name }} use
                    </label>
                    <br>
                    <label>
                        <input type="radio"
                               id="calendar_default_event_view"
                               name="calendar_default_event_view"
                               {% if calendar_default_event_view == 'reservations_and_usage' %}checked{% endif %}
                               value="reservations_and_usage">
                        Reservations and use
                    </label>
                    <label>
                        <input type="radio"
                               id="calendar_default_event_view"
                               name="calendar_default_event_view"
                               {% if calendar_default_event_view == 'configuration_agenda' %}checked{% endif %}
                               value="configuration_agenda">
                        Configuration agenda
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">Default view</label>
            <div class="col-md-9">
                <div class="radio">
                    <label>
                        <input type="radio"
                               id="calendar_view"
                               name="calendar_view"
                               {% if not calendar_view or calendar_view == 'agendaWeek' %}checked{% endif %}
                               value="agendaWeek">
                        Week view
                    </label>
                    <label>
                        <input type="radio"
                               id="calendar_view"
                               name="calendar_view"
                               {% if calendar_view == 'month' %}checked{% endif %}
                               value="month">
                        Month view
                    </label>
                    <label>
                        <input type="radio"
                               id="calendar_view"
                               name="calendar_view"
                               {% if calendar_view == 'agendaDay' %}checked{% endif %}
                               value="agendaDay">
                        Day view
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">First day of the week</label>
            <div class="col-md-9">
                <div class="radio">
                    <label>
                        <input type="radio"
                               id="calendar_first_day_of_week"
                               name="calendar_first_day_of_week"
                               {% if not calendar_first_day_of_week or calendar_first_day_of_week == '1' %}checked{% endif %}
                               value="1">
                        Monday
                    </label>
                    <label>
                        <input type="radio"
                               id="calendar_first_day_of_week"
                               name="calendar_first_day_of_week"
                               {% if calendar_first_day_of_week == '0' %}checked{% endif %}
                               value="0">
                        Sunday
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_start_of_the_day">Start of the day</label>
            <div class="col-md-3">
                <input type="text"
                       id="calendar_start_of_the_day"
                       name="calendar_start_of_the_day"
                       class="form-control"
                       value="{{ calendar_start_of_the_day }}"
                       placeholder="07:00:00">
            </div>
            <div class="col-md-6 help-block light-grey">The time the day starts in the calendar view (24h format).</div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_slot_resolution_minutes">Calendar resolution</label>
            <div class="col-md-3">
                <div class="input-group">
                    {% with selected_resolution=calendar_slot_resolution_minutes|default:"15" %}
                        <select id="calendar_slot_resolution_minutes" name="calendar_slot_resolution_minutes" class="form-control">
                            <option value="5" {% if selected_resolution == "5" %}selected{% endif %}>5</option>
                            <option value="10" {% if selected_resolution == "10" %}selected{% endif %}>10</option>
                            <option value="15" {% if selected_resolution == "15" %}selected{% endif %}>15</option>
                            <option value="20" {% if selected_resolution == "20" %}selected{% endif %}>20</option>
                            <option value="30" {% if selected_resolution == "30" %}selected{% endif %}>30</option>
                            <option value="60" {% if selected_resolution == "60" %}selected{% endif %}>60</option>
                        </select>
                    {% endwith %}
                    <span class="input-group-addon">minutes</span>
                </div>
            </div>
            <div class="col-md-6 help-block light-grey">Acts as global minimum reservation time.</div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_slot_label_interval_minutes">Time label interval</label>
            <div class="col-md-3">
                <div class="input-group">
                    <input type="number"
                           id="calendar_slot_label_interval_minutes"
                           name="calendar_slot_label_interval_minutes"
                           class="form-control"
                           min="1"
                           value="{{ calendar_slot_label_interval_minutes|default:60 }}">
                    <span class="input-group-addon">minutes</span>
                </div>
            </div>
            <div class="col-md-6 help-block light-grey">
                Time label spacing is rounded to the nearest multiple of calendar resolution when saved.
                <br>
                Adjust axis time format if &lt; 60.
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_outage_recurrence_limit">Outage recurrence limit</label>
            <div class="col-md-3">
                <div class="input-group">
                    <input type="number"
                           id="calendar_outage_recurrence_limit"
                           name="calendar_outage_recurrence_limit"
                           class="form-control"
                           value="{{ calendar_outage_recurrence_limit }}">
                    <span class="input-group-addon">days</span>
                </div>
            </div>
            <div class="col-md-6 help-block light-grey">
                The maximum number of days a recurring scheduled outage can be set in advance.
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_training_recurrence_limit">Training recurrence limit</label>
            <div class="col-md-3">
                <div class="input-group">
                    <input type="number"
                           id="calendar_training_recurrence_limit"
                           name="calendar_training_recurrence_limit"
                           class="form-control"
                           value="{{ calendar_training_recurrence_limit }}">
                    <span class="input-group-addon">days</span>
                </div>
            </div>
            <div class="col-md-6 help-block light-grey">
                The maximum number of days a recurring training can be set in advance.
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">Current time indicator</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="calendar_now_indicator"
                               {% if calendar_now_indicator %}checked{% endif %}
                               value="enabled">
                        Show current time indicator on the calendar
                    </label>
                    <br />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">Areas</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="calendar_display_not_qualified_areas"
                               {% if calendar_display_not_qualified_areas %}checked{% endif %}
                               value="enabled">
                        Also show areas (for reservations) that the user doesn't have access to (grayed out)
                    </label>
                    <br />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">Overview options:</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label style="padding-right: 20px;">
                        <input type="checkbox"
                               id="calendar_all_tools"
                               name="calendar_all_tools"
                               {% if calendar_all_tools %}checked{% endif %}
                               value="enabled">
                        Enable all tools option
                    </label>
                    <label style="padding-right: 20px;">
                        <input type="checkbox"
                               id="calendar_all_areas"
                               name="calendar_all_areas"
                               {% if calendar_all_areas %}checked{% endif %}
                               value="enabled">
                        Enable all areas option
                    </label>
                    <label style="padding-right: 20px;">
                        <input type="checkbox"
                               id="calendar_all_areastools"
                               name="calendar_all_areastools"
                               {% if calendar_all_areastools %}checked{% endif %}
                               value="enabled">
                        Enable all tools & areas option
                    </label>
                    <label style="padding-right: 20px;">
                        <input type="checkbox"
                               id="calendar_qualified_tools"
                               name="calendar_qualified_tools"
                               {% if calendar_qualified_tools %}checked{% endif %}
                               value="enabled">
                        Show qualified tools button
                    </label>
                    <label style="padding-right: 20px;">
                        <input type="checkbox"
                               id="calendar_tool_category_filter"
                               name="calendar_tool_category_filter"
                               {% if calendar_tool_category_filter %}checked{% endif %}
                               value="enabled">
                        Show tool category filter (calendar and tool control)
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">Configuration settings</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="calendar_configuration_in_reservations"
                               {% if calendar_configuration_in_reservations %}checked{% endif %}
                               value="enabled">
                        Show configuration settings and colors in the reservation calendar
                    </label>
                    <br />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">Nonqualified users</label>
            <div class="col-md-9">
                <input type="hidden" name="calendar_reservation_allow_non_qualified_with_invitee" value="" />
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               id="calendar_reservation_allow_non_qualified_with_invitee"
                               name="calendar_reservation_allow_non_qualified_with_invitee"
                               {% if calendar_reservation_allow_non_qualified_with_invitee %}checked{% endif %}
                               value="enabled"
                               onchange="$('#calendar_reservation_invitee_eligibility').toggle(this.checked);">
                        Allow nonqualified users to create tool reservations by selecting an invitee
                    </label>
                </div>
                <div id="calendar_reservation_invitee_eligibility"
                     class="radio"
                     style="margin-top: 10px;
                            {% if not calendar_reservation_allow_non_qualified_with_invitee %}display: none;{% endif %}">
                    <label style="padding-right: 20px;">
                        <input type="radio"
                               name="calendar_reservation_invitee_include_qualified"
                               value=""
                               {% if not calendar_reservation_invitee_include_qualified %}checked{% endif %}>
                        Only staff can be invited
                    </label>
                    <label>
                        <input type="radio"
                               name="calendar_reservation_invitee_include_qualified"
                               value="enabled"
                               {% if calendar_reservation_invitee_include_qualified %}checked{% endif %}>
                        All qualified users can be invited
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <span class="control-label col-md-3">Calendar status bar</span>
            <div class="col-md-9">
                <input type="hidden" name="calendar_status_bar_show_tool_reservation_policy" value="off" />
                <input type="hidden" name="calendar_status_bar_show_tool_latest_problem" value="off" />
                <input type="hidden" name="calendar_status_bar_show_tool_latest_problem" value="off" />
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="calendar_status_bar_show_tool_reservation_policy"
                               {% if calendar_status_bar_show_tool_reservation_policy == "enabled" %}checked{% endif %}
                               value="enabled">
                        Show tool reservation policy in the calendar status bar
                    </label>
                    <br>
                    <label>
                        <input type="checkbox"
                               name="calendar_status_bar_show_tool_pinned_comments"
                               {% if calendar_status_bar_show_tool_pinned_comments == "enabled" %}checked{% endif %}
                               value="enabled">
                        Show tool pinned comments in the calendar status bar
                    </label>
                    <br />
                    <label>
                        <input type="checkbox"
                               name="calendar_status_bar_show_tool_latest_problem"
                               {% if calendar_status_bar_show_tool_latest_problem == "enabled" %}checked{% endif %}
                               value="enabled">
                        Show last tool problem in the calendar status bar
                    </label>
                    <br />
                </div>
            </div>
            <div class="col-md-offset-3 col-md-9 form-inline">
                <label class="control-label" for="calendar_status_bar_tool_max_width">Max width</label>
                <div class="input-group">
                    <input type="number"
                           id="calendar_status_bar_tool_max_width"
                           name="calendar_status_bar_tool_max_width"
                           class="form-control"
                           value="{{ calendar_status_bar_tool_max_width }}">
                    <span class="input-group-addon">px</span>
                </div>
            </div>
        </div>
        <div class="customization-separation" style="margin-bottom: 15px"></div>
        <h3 class="customization-section-title">Calendar colors</h3>
        <div class="form-group">
            <div class="col-md-12">Default colors for calendar events</div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_color_tool_usage_default">Tool usage</label>
            <div class="col-md-3">
                <input type="color"
                       id="calendar_color_tool_usage_default"
                       name="calendar_color_tool_usage_default"
                       class="form-control"
                       value="{{ calendar_color_tool_usage_default }}">
            </div>
            <div class="col-md-6 help-block light-grey">
                Default color for tool usage events, unless customized in <a href="{% url 'admin:NEMO_tool_changelist' %}">Detailed Administration -> Tools</a>.
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_color_area_access_default">Area access</label>
            <div class="col-md-3">
                <input type="color"
                       id="calendar_color_area_access_default"
                       name="calendar_color_area_access_default"
                       class="form-control"
                       value="{{ calendar_color_area_access_default }}">
            </div>
            <div class="col-md-6 help-block light-grey">
                Default color for area access events, unless customized in <a href="{% url 'admin:NEMO_area_changelist' %}">Detailed Administration -> Areas</a>.
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_color_tool_reservation_default">Tool reservation</label>
            <div class="col-md-3">
                <input type="color"
                       id="calendar_color_tool_reservation_default"
                       name="calendar_color_tool_reservation_default"
                       class="form-control"
                       value="{{ calendar_color_tool_reservation_default }}">
            </div>
            <div class="col-md-6 help-block light-grey">
                Default color for tool reservations, unless customized in <a href="{% url 'admin:NEMO_tool_changelist' %}">Detailed Administration -> Tools</a>.
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_color_area_reservation_default">Area reservation</label>
            <div class="col-md-3">
                <input type="color"
                       id="calendar_color_area_reservation_default"
                       name="calendar_color_area_reservation_default"
                       class="form-control"
                       value="{{ calendar_color_area_reservation_default }}">
            </div>
            <div class="col-md-6 help-block light-grey">
                Default color for area reservations, unless customized in <a href="{% url 'admin:NEMO_area_changelist' %}">Detailed Administration -> Areas</a>.
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_color_tool_personal_schedule">Tool personal schedule</label>
            <div class="col-md-3">
                <input type="color"
                       id="calendar_color_tool_personal_schedule"
                       name="calendar_color_tool_personal_schedule"
                       class="form-control"
                       value="{{ calendar_color_tool_personal_schedule }}">
            </div>
            <div class="col-md-6 help-block light-grey">
                Color for tool usage and reservations shown in a user's personal schedule (global, cannot be changed per tool).
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_color_area_personal_schedule">Area personal schedule</label>
            <div class="col-md-3">
                <input type="color"
                       id="calendar_color_area_personal_schedule"
                       name="calendar_color_area_personal_schedule"
                       class="form-control"
                       value="{{ calendar_color_area_personal_schedule }}">
            </div>
            <div class="col-md-6 help-block light-grey">
                Color for area access and reservations shown in a user's personal schedule (global, cannot be changed per area).
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_color_tool_missed_reservation">Tool missed reservation</label>
            <div class="col-md-3">
                <input type="color"
                       id="calendar_color_tool_missed_reservation"
                       name="calendar_color_tool_missed_reservation"
                       class="form-control"
                       value="{{ calendar_color_tool_missed_reservation }}">
            </div>
            <div class="col-md-6 help-block light-grey">
                Color for missed tool reservations (global, cannot be changed per tool).
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_color_area_missed_reservation">Area missed reservation</label>
            <div class="col-md-3">
                <input type="color"
                       id="calendar_color_area_missed_reservation"
                       name="calendar_color_area_missed_reservation"
                       class="form-control"
                       value="{{ calendar_color_area_missed_reservation }}">
            </div>
            <div class="col-md-6 help-block light-grey">
                Color for missed area reservations (global, cannot be changed per area).
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_color_outage">Outage</label>
            <div class="col-md-3">
                <input type="color"
                       id="calendar_color_outage"
                       name="calendar_color_outage"
                       class="form-control"
                       value="{{ calendar_color_outage }}">
            </div>
            <div class="col-md-6 help-block light-grey">
                Color for scheduled tool and area outages (global, cannot be changed per tool or area).
            </div>
        </div>
        <div class="customization-separation" style="margin-bottom: 15px"></div>
        <h3 class="customization-section-title">Calendar format</h3>
        <div class="form-group">
            <div class="col-md-12" style="margin-top: 15px">
                The following settings allow to customize the date format in the different calendar views. See <a href="https://fullcalendar.io/docs/v1/formatDate" target="_blank">FullCalendar documentation</a> for more information on the syntax.
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_axis_time_format">Axis time format</label>
            <div class="col-md-3">
                <input type="text"
                       id="calendar_axis_time_format"
                       name="calendar_axis_time_format"
                       class="form-control"
                       value="{{ calendar_axis_time_format }}"
                       placeholder="ha">
            </div>
            <div class="col-md-6 help-block light-grey">
                The time format for the calendar axis labels  (only applies to day and week view).
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_day_column_format">Day column format</label>
            <div class="col-md-3">
                <input type="text"
                       id="calendar_day_column_format"
                       name="calendar_day_column_format"
                       class="form-control"
                       value="{{ calendar_day_column_format }}"
                       placeholder="dddd MM/DD/YYYY">
            </div>
            <div class="col-md-6 help-block light-grey">The column date format for the day view.</div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_day_time_format">Day time format</label>
            <div class="col-md-3">
                <input type="text"
                       id="calendar_day_time_format"
                       name="calendar_day_time_format"
                       class="form-control"
                       value="{{ calendar_day_time_format }}"
                       placeholder="h:mm">
            </div>
            <div class="col-md-6 help-block light-grey">The reservation time format for the day view.</div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_week_column_format">Week column format</label>
            <div class="col-md-3">
                <input type="text"
                       id="calendar_week_column_format"
                       name="calendar_week_column_format"
                       class="form-control"
                       value="{{ calendar_week_column_format }}"
                       placeholder="ddd M/DD">
            </div>
            <div class="col-md-6 help-block light-grey">The column date format for the week view.</div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_week_time_format">Week time format</label>
            <div class="col-md-3">
                <input type="text"
                       id="calendar_week_time_format"
                       name="calendar_week_time_format"
                       class="form-control"
                       value="{{ calendar_week_time_format }}"
                       placeholder="h:mm">
            </div>
            <div class="col-md-6 help-block light-grey">The reservation time format for the week view.</div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_month_column_format">Month column format</label>
            <div class="col-md-3">
                <input type="text"
                       id="calendar_month_column_format"
                       name="calendar_month_column_format"
                       class="form-control"
                       value="{{ calendar_month_column_format }}"
                       placeholder="ddd">
            </div>
            <div class="col-md-6 help-block light-grey">The column date format for the month view.</div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="calendar_month_time_format">Month time format</label>
            <div class="col-md-3">
                <input type="text"
                       id="calendar_month_time_format"
                       name="calendar_month_time_format"
                       class="form-control"
                       value="{{ calendar_month_time_format }}"
                       placeholder="h(:mm)t">
            </div>
            <div class="col-md-6 help-block light-grey">The reservation time format for the month view.</div>
        </div>
        <div class="customization-separation" style="margin-bottom: 15px"></div>
        <h3 class="customization-section-title">Reservation confirmations</h3>
        <div class="form-group">
            <label class="control-label col-md-3">Create</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="create_reservation_confirmation"
                               {% if create_reservation_confirmation %}checked{% endif %}
                               value="enabled">
                        Require users to confirm by clicking 'Ok' when creating a reservation (this setting can be overwritten by users).
                    </label>
                    <br />
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3">Move/Resize</label>
            <div class="col-md-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               name="change_reservation_confirmation"
                               {% if change_reservation_confirmation %}checked{% endif %}
                               value="enabled">
                        Require users to confirm by clicking 'Ok' when moving/resizing a reservation (this setting can be overwritten by users).
                    </label>
                    <br />
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-md-12" style="margin-top: 15px">
                The following settings allow to customize the date and time formats displayed on confirmations when <i>creating</i> a reservation.
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="reservation_confirmation_date_format">Date format</label>
            <div class="col-md-3">
                <input type="text"
                       id="reservation_confirmation_date_format"
                       name="reservation_confirmation_date_format"
                       class="form-control"
                       value="{{ reservation_confirmation_date_format }}"
                       placeholder="MMMM D, yyyy">
            </div>
            <div class="col-md-6 help-block light-grey">The date format (not including time).</div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-3" for="reservation_confirmation_time_format">Time format</label>
            <div class="col-md-3">
                <input type="text"
                       id="reservation_confirmation_time_format"
                       name="reservation_confirmation_time_format"
                       class="form-control"
                       value="{{ reservation_confirmation_time_format }}"
                       placeholder="h:mma">
            </div>
            <div class="col-md-6 help-block light-grey">The time format.</div>
        </div>
        <div class="customization-separation" style="margin-bottom: 15px"></div>
        <div class="text-center">{% button type="save" value="Save settings" %}</div>
    </form>
</div>