{% 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_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 %}
{{ form.errors }}
  <div class="form-group">
    <label class="col-sm-2 control-label">Type:</label>
    <div  id = 'types' class="col-sm-10">
      {{ form.type }}{{ form.type.errors }}
    </div>
  </div>
  <div class="form-group">
    <label  class="col-sm-2 control-label">Countries:</label>
    <div class="col-sm-10">
      {{ form.countries }}{{ form.countries.errors }}
    </div>
  </div>
    <div class="row">
    <label  class="col-sm-4 control-label">All:</label>
    <div class="col-sm-8">
      {{ form.all_countries }}
    </div>
    </div>

  <div class="form-group">
    <label  class="col-sm-2 control-label">Expos:</label>
    <div class="col-sm-10">
      {{ form.expositions }}{{ form.expositions.errors }}
    </div>
  </div>
  <div class="form-group">
    <label  class="col-sm-2 control-label">Conferences:</label>
    <div class="col-sm-10">
      {{ form.conferences }}{{ form.conferences.errors }}
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-6 col-sm-4">
      <button type="submit" class="btn btn-default">Submit</button>
      <button type="reset" class="btn">Reset</button>
    </div>
  </div>
</form>


{% endblock %}