{% extends 'base.html' %}
{% block title %}Area access{% endblock %}
{% block extrahead %}
	{% load static %}
	<script type="text/javascript" src="{% static "datetimepicker/bootstrap-datetimepicker.js" %}"></script>
	<link rel="stylesheet" type="text/css" href="{% static "datetimepicker/bootstrap-datetimepicker.css" %}" />
{% endblock %}
{% block content %}
	<h1>Area access</h1>
	<p>You can <a href="{% url 'new_area_access_record' %}">manually create an area access record</a> under extraordinary circumstances.</p>
	View area access records for:
	<ul>
		<li><a href="{{ today }}">Today</a></li>
		<li><a href="{{ yesterday }}">Yesterday</a></li>
		<li>Or, enter a custom date range</li>
	</ul>
	<form id="view_records" action="{% url 'area_access' %}" class="form-inline" method="get">
		<div class="form-group">
			<div class="datetimepicker-container">
				<input type="text" id="start" name="start" class="form-control" autocomplete="off" placeholder="start" value="{{ start|date:"m/d/Y" }}">
			</div>
		</div>
		<div class="form-group">
			<div class="datetimepicker-container">
				<input type="text" id="end" name="end" class="form-control" autocomplete="off" placeholder="end" value="{{ end|date:"m/d/Y" }}">
			</div>
		</div>
		<div class="form-group">
			<input type="submit" class="btn btn-default" value="View access records">
		</div>
	</form>
	<div class="col-lg-12" style="margin-top:30px">
		{% if access_records %}
			<table class="table table-bordered table-condensed">
				<thead>
					<tr>
						<th>Identifier</th>
						<th>User</th>
						<th>Project</th>
						<th>Start</th>
						<th>End</th>
					</tr>
				</thead>
				<tbody>
					{% for x in access_records %}
						<tr>
							<td>{{ x.id }}</td>
							<td>{{ x.customer }}</td>
							<td>{{ x.project }}</td>
							<td>{{ x.start }}</td>
							<td>{{ x.end|default:"In progress" }}</td>
						</tr>
					{% endfor %}
				</tbody>
			</table>
		{% else %}
			{% if start or end %}
				No access records exist between {{ start }} and {{ end }}.
			{% endif %}
		{% endif %}
	</div>
	<script>
		function on_load()
		{
			var timepicker_properties =
			{
				format: 'MM/DD/YYYY'
			};
			$('#start').datetimepicker(timepicker_properties);
			$('#end').datetimepicker(timepicker_properties);
		}
		$(on_load);
	</script>
{% endblock %}