{% extends 'base.html' %}
{% load static %}

{% block scripts %}

    {# selects #}
    <link href="{% static 'js/select/select2.css' %}" rel="stylesheet"/>
    <style>
        ul {
            list-style: none;
        }
    </style>
    <script src="{% static 'js/select/select2.js' %}"></script>

    <script>
        $(document).ready(function () {
            console.log(1);
            $("#id_countries").select2({width:'element'});
            $('#id_expositions').select2({
                placeholder: "Expositions",
                width: 'element',
                multiple: true,
                ajax: {

                    url: "/admin/exposition/search/",
                    dataType: "json",
                    quietMillis: 200,
                    multiple: true,

                    data: function (term, page) {
                        return {
                            term: term,
                            page: page
                        };
                    },

                    results: function (data) {
                        var results = [];
                        $.each(data, function (index, item) {
                            results.push({
                                id: item.id,
                                text: item.label
                            });
                        });
                        return {results: results};
                    }
                },
                initSelection: function (element, callback) {
                    var data = [];
                    var values = element.val();
                    element.val("");
                    $(values.split(",")).each(function (i) {
                        var item = this.split(':');
                        data.push({
                            id: item[0],
                            text: item[1]
                        });
                    });
                    console.log("initselection data: ");
                    console.log(data);
                    callback(data);

                }

            });
            $('#id_conferences').select2({
                placeholder: "Conferences",
                width: 'element',
                multiple: true,
                ajax: {

                    url: "/admin/conference/search/",
                    dataType: "json",
                    quietMillis: 200,
                    multiple: true,

                    data: function (term, page) {
                        return {
                            term: term,
                            page: page
                        };
                    },

                    results: function (data) {
                        var results = [];
                        $.each(data, function (index, item) {
                            results.push({
                                id: item.id,
                                text: item.label
                            });
                        });
                        return {results: results};
                    }
                },
                initSelection: function (element, callback) {
                    var data = [];
                    var values = element.val();
                    element.val("");
                    $(values.split(",")).each(function (i) {
                        var item = this.split(':');
                        data.push({
                            id: item[0],
                            text: item[1]
                        });
                    });
                    callback(data);

                }

            });

        });

    </script>

{% endblock %}

{% block body %}

    {# Uses multilang.html template for translated fields #}
    <form class="form-horizontal" method="post" action="">{% csrf_token %}
    <fieldset>
        <div class="box span8">
            <div class="box-header well">
                <h2><i class="icon-pencil"></i> </h2>
            </div>
            <div class="box-content">
            {% for f in form %}
                <div class="control-group {% if f.errors %}error{% endif %}">
                    <label class="control-label"><b>{{ f.label }}:</b></label>
                    <div class="controls">{{ f }}
                        <span class="help-inline">{{  f.errors }}</span>
                    </div>
                </div>
            {% endfor %}
            </div>
        </div>
        <div class="controls">
            <button type="submit" class="btn btn-large btn-primary">Submit</button>
            <button type="reset" class="btn btn-large">Reset</button>
        </div>
    </fieldset>
    </form>


{% endblock %}