{% block extrahead %}
	{% load static %}
	<script type="text/javascript" src="{% static "datetimepicker/bootstrap-datepicker.js" %}"></script>
	<link rel="stylesheet" type="text/css" href="{% static "datetimepicker/bootstrap-datepicker3.css" %}"/>
{% endblock %}

<div class="modal-header">
	<button type="button" class="close" data-dismiss="modal">&times;</button>
	<h4 class="modal-title">Schedule an outage</h4>
</div>

<div class="modal-body clearfix">
	{# Assume the dialog is cancelled by default, preventing the scheduled outage request from being processed further. #}
	{# When a button is clicked this value is set to false, enabling further processing. #}
	{# Hiding the dialog using the X in the top right, or clicking outside of it, will stop processing. #}
	<input type="hidden" id="dialog_cancelled" value="true">
	<form id="additional_event_parameters" onsubmit="return false">
		<input type="hidden" id="configured" name="configured" value="true">
		<div class="form-group col-sm-12">
			<label for="title">Title</label>
			<input id="title" name="title" type="text" maxlength="100" class="form-control" autocomplete="off" placeholder="You must provide a title to create a scheduled outage">
		</div>
		{% if categories %}
			<div class="form-group col-sm-12">
				<label for="category">Category</label><span class="light-grey"> - is there a category for this outage? This is useful for data and trend analysis</span>
				<select class="form-control" name="category" id="category">
					<option></option>
					{% for c in categories %}
						<option>{{ c }}</option>
					{% endfor %}
				</select>
			</div>
		{% endif %}
		<div class="form-group col-sm-12">
			<label for="details">Details</label>
			<textarea name="details" id="details" rows="7" maxlength="3000" class="form-control" placeholder="Please provide any additional details for the scheduled outage. Be descriptive so that users understand why there is a scheduled outage."></textarea>
		</div>
		<div class="col-sm-12">
			<a onclick="toggle_details(this)" data-toggle="collapse" data-target="#recurrence" class="pointer" style="text-decoration: none">
				<input type="checkbox" id="recurring_outage" name="recurring_outage"/>
			</a>
			<label for="recurring_outage" style="padding-left: 5px">Create more than one occurrence of this outage</label>
		</div>
		<div id="recurrence" class="collapse col-sm-12" style="margin: 0 auto">
			<div class="col-sm-12">
				<div class="form-group col-sm-2">
					<label for="recurrence_interval">Every</label>
					<input id="recurrence_interval" name="recurrence_interval" type="number" class="form-control" value="1"/>
				</div>
				<div class="form-group col-sm-6">
					<label for="recurrence_frequency">Frequency</label>
					<select class="form-control" name="recurrence_frequency" id="recurrence_frequency">
						{% for value, display in recurrence_intervals.items %}
							<option value="{{ value }}">{{ display }}</option>
						{% endfor %}
					</select>
				</div>
				<div class="form-group col-sm-4">
					<label for="recurrence_until">Until:</label>
					<input type="text" id="recurrence_until" name="recurrence_until" class="form-control select-date" placeholder="Choose a date">
				</div>
			</div>
		</div>
	</form>
</div>

<div class="modal-footer">
	<div class="col-sm-12">
		<button id="schedule_outage" disabled type="button" class="btn btn-success" data-dismiss="modal" onclick="$('#dialog_cancelled').val(false)">Schedule this outage</button>
	</div>
</div>

<script>
	autofocus('#title');
	$('#title').on('input', function() { if(this.value) $('#schedule_outage').prop('disabled', false); else $('#schedule_outage').prop('disabled', true); });
	$('#recurrence_until').datepicker({format: 'mm/dd/yyyy', endDate: moment('{{ recurrence_date_start|date:"m/d/Y" }}').add({{ calendar_outage_recurrence_limit }}, 'days').toDate(), startDate:'{{ recurrence_date_start|date:"m/d/Y" }}', autoclose: true});
</script>