{% load cms_tags  djangocms_forms_tags i18n sekizai_tags staticfiles %}

<script type="application/javascript">
var form = {
{% for item in results.form_data %}
        {% if item.label %}
        '{{ item.label }}'
        {% else %}
        '{{ item.name }}'
        {% endif %}
        : { 
            'size': 
            {% if item.value == True %}
            1
            {% elif item.value == False or item.value == None %}
            0
            {% else %}
            {{ item.value|length }}
            {% endif %}
            ,
            {% if item.type != 'checkbox_multiple' %}
                'values': '{{ item.value }}',
            {% else %}
                'values': [
                {% if item.value|length > 0 %}
                    {% for val in item.value %}
                    '{{ val }}',
                    {% endfor %}

                {% endif %}
                ],
            {% endif %}
            'name': '{{ item.name }}'
        },
{% endfor %}
};
</script>

<div class="forms" id="{{ instance.form_id }}">
    {% if instance.title %}
        <h3 class="title">{{ instance.title }}</h3>
    {% endif %}
    {% if instance.description %}
        <div class="description">
            {{ instance.description|safe }}
        </div>
    {% endif %}
    
    {% verbatim %}
    <div class="nice" ng-controller="NiceCtrl">
        <div id="{{ tabs_list_id }}" ng-tabs class="nice-tabs tabs-plugin">
    {% endverbatim %}
            <ul class="tabs-list list-unstyled list-inline">
                <li ng-tab-head="active"><a ng-click="$event.preventDefault()" href="#nice-catalog">{% trans 'Classes Catalog' %}</a></li>
                <li ng-tab-head="active"><a ng-click="$event.preventDefault()" href="#nice-all">{% trans 'All Classes' %}</a></li>
            </ul>
    {% verbatim %}


            <div class="nice-catalog tab-body" id="nice-catalog" ng-tab-body>
                <div class="nice-categories">
                    <ul class="list-unstyled list-inline">
                        <li ng-repeat="category in categories track by category.id" ng-class="selectedCategory == category.id ? 'active' : ''">
                            <button ng-click="selectCategory(category.id)" class="btn btn-link">{{ category.title }}</button> <span class="category_size badge" id="category_{{ category.id }}_label">{{ category.selected.length || '' }}</span>
                        </li>
                    </ul>
                </div>

                <div class="nice-classes">
                    <ul class="list-unstyled">
                        <li ng-repeat="class in nice | filter:filterByCategory"> 
                            <label for="class_{{ class.id }}">
                                <input id="class_{{ class.id }}" type="checkbox" ng-model="class.selected" ng-change="setClasses()"/>
                                <strong>{{ class.id }}</strong> – {{ class.title }} 
                                <button ng-show="class.description.length > 0" popover="{{ class.description }}" popover-title="{{ class.title }}" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-xs btn-default">···</button>
                            </label>
                            
              
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="nice-all tab-body" id="nice-all" ng-tab-body>
                <ul class="list-unstyled list-inline">
                    <li ng-repeat="class in nice"> 
                        <label for="class_{{ class.id }}">
                            <input id="class_{{ class.id }}" type="checkbox" ng-model="class.selected" ng-change="setClasses()"/>
                            <strong>{{ class.id }}</strong> – {{ class.title }} 
                            <button ng-show="class.description.length > 0" popover="{{ class.description }}" popover-title="{{ class.title }}" popover-trigger="mouseenter" popover-placement="bottom" class="btn btn-xs btn-default">···</button>
                        </label>
                        
          
                    </li>
                </ul>
            </div>
        </div>
        {% endverbatim %}

        {% if request.LANGUAGE_CODE == 'ru' %}
            {% verbatim %}<h5 ng-show="classes_values.length > 0">{{ GetNoun(classes, 'Выбран', 'Выбраны', 'Выбрано') }} {{ classes }}  {{ GetNoun(classes, 'класс', 'класса', 'классов') }}</h5>{% endverbatim %}
        {% else %}
            {% verbatim %}<h5 ng-show="classes_values.length > 0">Selected {{ classes }} {{ GetNoun(classes, 'сlass', 'сlasses', 'сlasses') }}</h5>{% endverbatim %}
        {% endif %}

        {% verbatim %}
        <ul class="nice-selected list-unstyled list-inline">
            <li ng-repeat="id in classes_values"><span class="label label-default"><strong>{{ nice[id-1].id }}</strong> – {{ nice[id-1].title }}</span></li>
        </ul>

    </div>
    {% endverbatim %}

    <div class="form-wrapper">
        <form action="{{ form.submission_url }}" method="POST" enctype="multipart/form-data">
            <div class="form-errors" style="display:none;"></div>

            <div class="hide">
            {% for field in form.visible_fields %}
                {% if field|is_checkboxselectmultiple %}
                    {{ field }}
                {% endif %}
            {% endfor %}
            </div>
          
            {% for field in form.visible_fields %}
                {% if not field|is_checkboxselectmultiple %}
                    <div class="field-wrapper {{ field|input_class }} {{ field.css_classes }}">
                        <div class="field-errors" style="display:none;"></div>
                        {% if field|is_checkbox %}
                            {{ field }}
                        {% endif %}
                        <label for="{{ field.id_for_label }}">
                            {{ field.label }}
                        </label>
                        {% if field|is_textarea %}
                            <div id="help-text-{{ field.auto_id }}" class="help-text">{{ field.help_text|safe }}</div>
                        {% endif %}
                        {% if not field|is_checkbox %}
                            <p>{{ field }}</p>
                        {% endif %}
                        {% if not field|is_textarea and field.help_text %}
                            <div id="help-text-{{ field.auto_id }}" class="help-text">{{ field.help_text|safe }}</div>
                        {% endif %}
                    </div>
                {% endif %}
            {% endfor %}


           
            {% csrf_token %}

            {% for hidden in form.hidden_fields %}
                {{ hidden }}
            {% endfor %}
            <div class="button-wrapper submit">
                <button class="form-button btn btn-primary" type="submit" value="{{ instance.submit_btn_txt }}">{{ instance.submit_btn_txt }}</button>
            </div>
        </form>
    </div>
    <div class="form-success" style="display: none;">
        {% if instance.post_submit_msg %}
            <p>{{ instance.post_submit_msg|safe }}</p>
        {% else %}
            {% blocktrans %}
                <h3>Submission successful</h3>
                <p>Thank You! Your form has been successfully submitted!</p>
            {% endblocktrans %}
        {% endif %}
    </div>
</div>

{% addtoblock "js" %}
    <script src="{% static 'js/djangocms_forms/libs/jquery.form.min.js' %}"></script>
    <script src="{% static 'js/djangocms_forms/djangocms_forms.js' %}"></script>
    <script type="application/javascript">
        $(function() {
           $('.forms').djangocms_forms();
        
        });
    </script>
{% endaddtoblock %}