{% extends 'staff_charges/staff_charges_base.html' %}
{% load custom_tags_and_filters %}
{% block staff_charges_content %}
    <p>
        Use this form to charge a user for staff time and area access time when you are working on a project on their behalf. You may only work on one user project at a time for a customer.
    </p>
    {% if error %}<div class="alert alert-danger">{{ error }}</div>{% endif %}
    <form id="new_staff_charge" action="{% url 'staff_charges' %}" class="form-horizontal" method="get">
        <div class="form-group">
            <label for="customer_search" class="control-label col-sm-2">
                <strong>Customer</strong>
            </label>
            <div class="col-sm-4">
                <input id="customer_search" type="text" class="form-control" placeholder="Search for a customer" required>
                <input id="customer" name="customer" type="hidden">
            </div>
        </div>
        {% if core_facility_required or core_facilities %}
            <div class="form-group">
                <label class="control-label col-sm-2" for="core_facility">
                    {% if core_facility_required %}
                        <strong>Core Facility</strong>
                    {% else %}
                        Core Facility
                    {% endif %}
                </label>
                <div class="col-sm-4">
                    <select id="core_facility"
                            name="core_facility"
                            class="form-control"
                            {% if core_facility_required %}required{% endif %}>
                        <option disabled selected value="">Select a core facility</option>
                        {% for core_facility in core_facilities %}
                            <option value="{{ core_facility.id }}">{{ core_facility.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        {% endif %}
        <div class="form-group">
            <div class="col-sm-6 text-right">{% button type="save" value="Continue" icon="glyphicon-ok-circle" %}</div>
        </div>
    </form>
    <script>
		function select_user(jquery_event, search_selection, dataset_name)
		{
			$("#customer").val(search_selection.id);
			$('#customer_search').prop("required", false);
		}
		$('#customer_search').autocomplete('users', select_user, {{ users|json_search_base }}).focus();
	
    </script>
{% endblock %}
