{% extends 'base.html' %}
{% load custom_tags_and_filters %}
{% 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"
          style="margin-top: 15px;
                 width: 500px">
        <div class="form-group col-md-3 form-control-static">Date range:</div>
        <div class="form-group">
            <div class="form-group">
                <div class="datetimepicker-container">
                    <input type="text"
                           id="start"
                           name="start"
                           aria-label="Start date"
                           class="form-control"
                           autocomplete="off"
                           placeholder="start"
                           value="{{ start.date|input_date_format }}">
                </div>
            </div>
            <div class="form-group">
                <div class="datetimepicker-container">
                    <input type="text"
                           id="end"
                           name="end"
                           aria-label="End date"
                           class="form-control"
                           autocomplete="off"
                           placeholder="end"
                           value="{{ end.date|input_date_format }}">
                </div>
            </div>
        </div>
        <div style="margin-top: 15px">
            <div class="form-group col-md-3 form-control-static">Area:</div>
            <div class="form-group">{{ area_select_field }}</div>
        </div>
        <div class="form-group col-md-12" style="margin-top: 15px">
            {% button type="view" value="View access records" submit=True %}
        </div>
    </form>
    <div class="col-lg-12" style="margin-top:30px">
        {% if access_records %}
            <table class="table table-bordered table-condensed">
                <thead>
                    <tr>
                        <th>Area</th>
                        <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.area }}</td>
                            <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
                {% if start and end %}
                    between {{ start }} and {{ end }}
                {% elif start %}
                    after {{ start }}
                {% else %}
                    before {{ end }}
                {% endif %}
                .
            {% endif %}
        {% endif %}
    </div>
    <script>
		function on_load()
		{
			let timepicker_properties =
			{
				format: '{{ date_input_js_format }}'
			};
			$('#start').datetimepicker(timepicker_properties);
			$('#end').datetimepicker(timepicker_properties);
		}
		$(on_load);
	
    </script>
{% endblock %}
