{% extends "admin/change_form.html" %}
{% load static %}
{% load i18n %}


{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'select2-3.4.8/select2.css' %}">
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <script src="{% static 'jquery-1.11.1.min.js' %}"></script>
    <script src="{% static 'select2-3.4.8/select2.min.js' %}"></script>
{% endblock %}

{% block form_top %}
    <p>Add a new group. The autocomplete field searches by group name or group id in the lookup service of the
        University of Cambridge.</p>
{% endblock %}

{% block after_field_sets %}
<script type="text/javascript">

    /**
     * ID of the last AJAX search request we sent.
     */
    searchId_g = 0;

    $(document).ready(function() {
        $("#id_lookup_id").select2({
            placeholder: "Search for a group",
            minimumInputLength: 3,
            multiple: false,
            ajax: {
                url: "{%  url 'ucamlookup_find_groups' %}",
                dataType: 'json',
                data: function (term, page) {
                    return {
                        query: term,
                        searchId_g: ++searchId_g
                    };
                },
                results: function (data, page) {
                    if (data.searchId_g != searchId_g)
                        return;
                    return {results: data.groups};
                }
            },
            formatResult: function(group) {
                return group.title;
            },
            formatSelection: function(group) {
                return group.title;
            },
            id: function(group) {
                return group.groupid;
            },
            dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
            escapeMarkup: function (m) { return m; },
            // we do not want to escape markup since we are displaying html in results
            width: '100%'
        });
    });
</script>
{% endblock %}