{% extends 'base.html' %}
{% load static %}
{% block title %}New reservation{% endblock %}
{% block extrahead %}
	<script type="text/javascript" src="{% static "pickadate/picker.js" %}"></script>
	<script type="text/javascript" src="{% static "pickadate/picker.date.js" %}"></script>
	<script type="text/javascript" src="{% static "pickadate/picker.time.js" %}"></script>
	<link rel="stylesheet" type="text/css" href="{% static "pickadate/default.css" %}"/>
	<link rel="stylesheet" type="text/css" href="{% static "pickadate/default.date.css" %}"/>
	<link rel="stylesheet" type="text/css" href="{% static "pickadate/default.time.css" %}"/>
{% endblock %}
{% block content %}
	<h3>Create a new reservation</h3>
	<form method="post" action="{% url 'make_reservation' %}">
		{% csrf_token %}
		<input type="hidden" name="tool_id" value="{{ tool.id }}">
		{% if not user.is_staff %}
			{% if user.active_project_count == 1 %}
				<input type="hidden" name="project_id" value="{{ user.active_projects.0.id }}">
			{% elif user.active_project_count > 1 %}
				<h4>Which project is this for?</h4>
				{% for project in user.active_projects %}
					<div class="radio"><label><input type="radio" name="project_id" value="{{ project.id }}">{{ project }}</label></div>
				{% endfor %}
			{% endif %}
		{% endif %}
		{% if configurations %}
			<h4>Choose tool configuration settings</h4>
			{% if notice_limit > 0 %}
				<div class="alert alert-info">
					<strong>Please note:</strong> {{ notice_limit }} hours of advance notice is required when reserving this tool in order to configure it properly. A tool is not guaranteed to be configured properly if a reservation is created or modified on short notice.
				</div>
			{% endif %}
			{% include 'calendar/configuration_helper.html' %}
		{% endif %}
		<h4>When would you like to reserve the {{ tool }}?</h4>
		<div class="form-group">
			<input type="text" id="date" name="date" class="form-control" placeholder="Choose a date">
		</div>
		<div class="form-group">
			<input type="text" id="start" name="start" class="form-control" placeholder="Choose a start time">
		</div>
		<div class="form-group">
			<input type="text" id="end" name="end" class="form-control" placeholder="Choose an end time">
		</div>
		<div class="form-group text-center" style="margin-top:40px">
			<input type="submit" value="Create the reservation" class="btn btn-success">
		</div>
	</form>
	<div style="height:350px"></div>
	<script>
		$('#date').pickadate({format: "dddd, mmmm d", formatSubmit: "yyyy-mm-dd", firstDay: 1, hiddenName: true, onStart: set_initial_date});
		$('#start').pickatime({interval: 15, formatSubmit: "H:i", hiddenName: true});
		$('#end').pickatime({interval: 15, formatSubmit: "H:i", hiddenName: true});
		function set_initial_date()
		{
			if('{{ date }}')
				this.set('select', '{{ date }}', {format: 'yyyy-mm-dd'})
		}
	</script>
{% endblock %}