{% extends 'base.html' %}
{% load custom_tags_and_filters %}
{% block title %}Add area access record{% endblock %}
{% block content %}
    {% if error_message %}
        <div class="alert alert-danger">
            Oops! Something went wrong. The new area access record was not created because:
            <br>
            {{ error_message }}
        </div>
    {% endif %}
    {% if success %}<div class="alert alert-success">{{ success }}</div>{% endif %}
    <h1>New area access record</h1>
    <p style="font-weight: bold">
        Only use this form under extraordinary circumstances (such as when tablet login is not working).
        This form is not intended to be used regularly.
    </p>
    <form id="new_area_access_record"
          action="{% url 'new_area_access_record' %}"
          class="form-inline"
          method="get">
        <div class="form-group">
            <input id="customer_search" type="text" class="form-control" placeholder="Search for a customer">
            <input id="customer" name="customer" type="hidden">
        </div>
    </form>
    <script>
		function select_user(jquery_event, search_selection, dataset_name)
		{
			$("#customer").val(search_selection.id);
			$("#new_area_access_record").submit();
		}
		$('#customer_search').autocomplete('users', select_user, {{ customers|json_search_base }}).focus();
	
    </script>
{% endblock %}
