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

{% block select2 %}
    <link href="{% static 'js/select2-4.0.3/css/select2.min.css' %}" rel="stylesheet"/>
    <script src="{% static 'js/select2-4.0.3/js/select2.full.min.js' %}"></script>
{% endblock select2 %}
    
{% block main_js_exlude %}
{% endblock main_js_exlude %}


{% block scripts %}
    {# selects #}
    {# <link href="{% static 'js/select2-4.0.3/css/select2.min.css' %}" rel="stylesheet"/> #}
    {# // <script src="{% static 'js/select2-4.0.3/js/select2.min.js' %}"></script> #}
    <script>
        function make_event_select(select){
            select.select2({
                multiple: select.attr('multiple') || false,
                ajax: {
                    url: select.data('ajax-url'),
                    width: '550px',
                    dataType: "json",
                    quietMillis: 200,

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

                    processResults: function (data) {
                        return {results: $.map(JSON.parse(data), function(obj) {
                                obj.text = obj.label;
                                return obj
                        })};
                    },

                },

                createTag: function(params) {
                    return undefined;
                },
            });
        }

        $(document).ready(function(){
            $('select[select2=true], input[select2=true]').each(function() {
                make_event_select($(this));
                // $(this).select2_sortable();
            });
            $('#id_fr').datetimepicker({
                todayHighlight: true,
                format : 'yyyy-mm-dd',
                minView:2
            });
            $('#id_to').datetimepicker({
                todayHighlight: true,
                format : 'yyyy-mm-dd',
                minView:2
            });
        });
    </script>

    <style>
        .select2-container--default .select2-selection--multiple .select2-selection__rendered li {
            float: none;
        }
    </style>
{% endblock %}

{% block body %}

    <div class="row-fluid sortable">
        <div class="box span12">
            <div class="box-header well" data-original-title>
                <h2><i class="icon-tasks"></i>{{ form.verbose }}</h2>
            </div>
            <div class="box-content">
                <form method="post" action=".">
                {% csrf_token %}

                {% for field in form %}
                    <div class="control-group {% if field.errors %}error{% endif %}">
                        <label class="control-label"><b>{{ field.label }}:</b></label>
                        <div class="controls">{{ field }}
                            <span class="help-inline">{{  field.errors }}</span>
                        </div>
                    </div>
                {% endfor %}

                <hr/>
                <button type="submit" class="btn btn-primary" >Сохранить</button>
                </form>
            </div>
        </div>
    </div>

{% endblock %}

{% block bot_scripts %}
{% endblock %}