{% extends 'base.html' %}
{% load custom_tags_and_filters %}
{% block title %}Batch qualifications{% endblock %}
{% block content %}
    <h1>Batch qualifications</h1>
    <p>
        Use this form to qualify one or more users on one or more tools. You may select as many users or tools as you like.
        User and tool names are automatically searched for when you type in the text boxes below. All of the selected users
        will be qualified or disqualified for all of the selected tools. You can remove a selected user or tool by clicking
        on the representative button.
    </p>
    <form method="post" action="{% url 'modify_qualifications' %}">
        {% csrf_token %}
        <input type="hidden" name="redirect" value="true">
        <div class="form-group">
            <div class="row">
                <div class="col-md-6">
                    <button type='submit'
                            class="btn btn-success"
                            name="action"
                            value="qualify"
                            onclick="set_qualification_level_required(true)">
                        <i class="glyphicon glyphicon-plus"></i> Qualify users
                    </button>
                </div>
                <div class="col-md-6 text-right">
                    <button type='submit'
                            class="btn btn-danger"
                            name="action"
                            value="disqualify"
                            onclick="set_qualification_level_required(false)">
                        <i class="glyphicon glyphicon-minus"></i> Disqualify
                        users
                    </button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="{% if qualification_levels %}col-md-4{% else %}col-md-6{% endif %}">
                <div class="form-group">
                    <label for="user_search">Search for user</label>
                    <input id='user_search' class="form-control" />
                </div>
                <div id="chosen_users" class="form-group"></div>
            </div>
            <div class="{% if qualification_levels %}col-md-4{% else %}col-md-6{% endif %}">
                <div class="form-group">
                    <label for="tool_search">Search for tool</label>
                    <input id='tool_search' class="form-control" />
                </div>
                <div id="chosen_tools" class="form-group"></div>
                <div id="chosen_toolqualificationgroups" class="form-group"></div>
            </div>
            {% if qualification_levels %}
                <div class="col-md-4">
                    <label for="qualification_level">Select qualification level</label>
                    <select id="qualification_level" name="qualification_level" class="form-control">
                        <option disabled selected value="">&nbsp;</option>
                        {% for ql in qualification_levels %}<option value="{{ ql.id }}">{{ ql.name }}</option>{% endfor %}
                    </select>
                </div>
            {% endif %}
        </div>
    </form>
    <script type="text/javascript">
		function create_entry(jquery_event, search_selection, dataset_name)
		{
			$('#user_search').typeahead('val', '');
			$('#tool_search').typeahead('val', '');
            {# Use type if provided otherwise the name of the dataset #}
            let input_name = search_selection.type || dataset_name;
			let id = input_name + "_" + search_selection.id;
			if($("#" + id).length)
				return;
			$("#chosen_" + input_name + "s").append
			(
					"<div class='form-group'>" +
					"<button class='btn btn-default' onclick='$(this).closest(\"div\").remove()'>" + search_selection.name + "</button>" +
					"<input type='hidden' name='chosen_" + input_name + "[]' value='" + search_selection.id + "' id='" + input_name + "_" + search_selection.id + "'>" +
					"</div>"
			);
		}

		function set_qualification_level_required(required) {
            $('#qualification_level').prop('required', required);
        }

		function on_load()
		{
			$('#user_search').autocomplete('user', create_entry, {{ users|json_search_base }}).focus();
			$('#tool_search').autocomplete('tool', create_entry, {% json_search_base_with_extra_fields tools|add:tool_groups %}, {% if tool_groups %}false{% else %}true{% endif %});
		}

		$(on_load);

    </script>
{% endblock %}
