{% load cms_tags  djangocms_forms_tags i18n sekizai_tags staticfiles %}

<div class="order order-form" ng-controller="ModalFormCtrl">
<script type="text/ng-template" id="modalFormTemplate-{{ instance.id }}.html">
    <div class="modal-body modal-form modal-consultation">
        <img src="{% with 'imgs/phone.png' as image_static %}{% static image_static %}{% endwith %}">
        <div class="forms" id="{{ instance.form_id }}">
            {% if instance.title != instance.name %}
                <h1 class="title">{{ instance.title }}</h1>
                {% if request.LANGUAGE_CODE == 'ru' %}
                <h2 class="title">Услуга «{{ instance.name }}»</h2>
                {% else %}
                <h2 class="title">{{ instance.name }} Service</h2>
                {% endif %}
            {% else %}
                <h1 class="title">{{ instance.name }}</h1>
            {% 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" class="request">
                    <div class="form-errors" style="display:none;"></div>

                    <div class="field-wrapper">

                        <label for="name">
                            {% trans 'Name' %}
                        </label>
                        <p>
                            {{ form.name }}
                        </p>
                    {% if form.email %}
                    <p>{% trans 'We can call you or anwser by email' %}</p>
                        <div id="contact-type" ng-tabs class="tabs-plugin">
                            <ul class="tabs-list list-unstyled list-inline">
                                <li ng-tab-head="active"><a ng-click="$event.preventDefault()" href="#contact-phone">{% trans 'Call' %}</a></li>

                                <li ng-tab-head="active"><a ng-click="$event.preventDefault()" href="#contact-email">{% trans 'Email' %}</a>
                            </ul>

                            <div id="contact-phone" ng-tab-body class="tab-body">
                                {{ form.phone }}
                            </div>

                            <div id="contact-email" ng-tab-body class="tab-body">
                                <p>{{ form.email }}</p>
                                <label for="comment">
                                {% trans 'Question' %}
                                </label>
                                <p>{{ form.comment }}</p>
                            </div>
                        </div>
                    {% else %}
                        <label for="phone">
                            {% trans 'Phone' %}
                        </label>
                        <p>
                            {{ form.phone }}
                        </p>

                        <label for="subject">
                            {% trans 'Subject' %}
                        </label>
                        <p>
                            {{ form.subject }}
                        </p>

                    {% endif %}

                    </div>

                    <div class="form_message">
                        {{ form.message }}
                    </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>
    </div>


    </form>
</div>
</script>

<button class="btn btn-consultation btn_request xs-offset-bottom" ng-click="open('{{ instance.id }}');" value="">{{ instance.title }}</button>
{% if request.LANGUAGE_CODE == 'ru' %}
<p>Вы можете <em>обратить к нам с вопросом</em> или <em>заказать услугу</em> «{{ instance.name }}»</p>
{% else %}
<p>We will <em>give you free advice</em> and provide "{{ instance.name }}" service</p>
{% endif %}
</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="text/javascript">
    $(function() {
        if(typeof consultation_link == "undefined") {
            $( "[href^='#order']" ).click(function(e) {
                event.preventDefault();

                angular.element($('.order-form')[0]).scope().open({{ instance.id }});
            });

            consultation_link = true;
        }
    });
    </script>

{% endaddtoblock %}