<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">
	{# 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">
			<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">
				<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">
			<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>
	</form>
</div>

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

<script>
	autofocus('#title');
	$('#title').on('input', function() { if(this.value) $('#schedule_outage').prop('disabled', false); else $('#schedule_outage').prop('disabled', true); });
</script>