{% 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 %}
        : '{{ item.value|friendly|default_if_none:'—' }}',
{% 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 %}


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

            <div id="{{ tabs_list_id }}" ng-tabs class="tabs-plugin service-trademark-product-class">
                <div class="headers">
                    <ul class="tabs-list list-unstyled list-inline">
                        {% for field in form.visible_fields %}
                            {% if field|is_checkboxselectmultiple %}
                                {% if forloop.first %}  
                                    <li ng-tab-head="active"><a ng-click="$event.preventDefault()" href="#{{ field.id_for_label }}">{{ field.label }}</a></li>
                                {% else %}
                                    <li ng-tab-head="active"><a ng-click="$event.preventDefault()" href="#{{ field.id_for_label }}">{{ field.label }}</a></li>
                                {% endif %}

                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
                <div class="variants">
                {% for field in form.visible_fields %}
                    <div id="{{ field.id_for_label }}" ng-tab-body class="tab-body">
                        {% if field|is_checkboxselectmultiple %}
                            {{ field }}
                        {% endif %}

                    </div>
                {% endfor %}
                </div>
            </div>



           
            {% 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();

            $(".service-trademarks-class-form input[type=checkbox]").each(function () {
                $(this).change(updateCount);
              });

              updateCount();

              function updateCount () {
                var count = $(".service-trademarks-class-form input[type=checkbox]:checked").size(),
                    scope = angular.element($('.bill')).scope();

                if(count == 0) {
                    count = 1;
                }

                scope.$apply(function () {
                    scope.classes = count;
                });
              };
        });
    </script>
{% endaddtoblock %}