    {% load widget_tweaks i18n allink_form_tags %}

{% block form_container %}
    <form
        id="{{ form_name }}"
        class="form-default validate-form default-contact-form {% block form_style %}side-by-side{% endblock form_style %} {{instance.css_classes}}{% if not no_ajax %} ajax-form{% endif %} {{ class }} {% block form_additional_classes %}{% endblock form_additional_classes %}"
        method="{{ method|default:"POST" }}"
        novalidate="novalidate"
        action="{% url "contact:request" plugin_id=instance.id %}"
        data-success-data-layer-event="contact-form.sent"
        {% block form_additional_attributes %}{% endblock form_additional_attributes %}
        >

        {# utility block #}
        {% block form_inner_before %}
        {% endblock form_inner_before %}

        {% block csrf_token_container %}
            {% if not method == "get" %}{% csrf_token %}{% endif %}
        {% endblock csrf_token_container %}

        {% block form_heading_container %}
            <div class="heading-container">
                <h2 class="heading">
                    {% trans 'Contact us' %}
                </h2>
            </div>
        {% endblock form_heading_container %}

        {# utility block #}
        {% block form_fields_before %}
        {% endblock form_fields_before %}

        {% for field in form.visible_fields %}
            {% if field.name != 'contact_type' and field.name != 'email' and field.name != 'date' and field.name != 'time' and field.name != 'phone' and field.name %}
                {% include "partials/forms/form_field.html" with style='stacked' %}
            {% endif %}
        {% endfor %}

        {# utility block #}
        {% block form_fields_loop_after %}
        {% endblock form_fields_loop_after %}

        <div class="form-group {% if form.contact_type.errors %}has-error{% endif %}">
            <label for="{{ form.contact_type.id_for_label }}" class="control-label required">
                {% spaceless %}
                    <span class="label-text">{% trans "Please contact me via" %}</span>
                    <span class="required-symbol"><span class="sr-only">{% trans "(required)" %}</span></span>
                {% endspaceless %}
            </label>
            {% render_field form.contact_type class+="selectpicker form-control" required="required" %}
            {{ form.contact_type.errors }}
        </div>

        <div class="form-group phone-container {% if form.phone.errors %}has-error{% endif %}" style="display:none;">
            <label for="{{ form.phone.id_for_label }}" class="control-label required">
                <span class="label-text">{% trans "Phone" %}</span>
                <span class="required-symbol"><span class="sr-only">{% trans "(required)" %}</span></span>
            </label>
            {% render_field form.phone class+="form-control" required="required" %}
            {{ form.phone.errors }}
        </div>

        <div class="form-group col-1-1 phone-container" style="display:none;">
            <div class="control-label required">
                <span class="label-text">{% trans "Choose date and time" %}</span>
                <span class="required-symbol"><span class="sr-only">{% trans "(required)" %}</span></span>
            </div>
            <div class="col-container">
                <div class="col col-1 error-state-handler {% if form.date.errors %}has-error{% endif %}">
                    <label for="{{ form.date.id_for_label }}" class="sr-only">
                        {% trans "Choose a date" %}
                    </label>
                    <div class="datepicker-container">
                        {% render_field form.date class+="datepicker" required="required" %}
                        <span class="calendar-btn"></span>
                    </div>
                    {{ form.date.errors }}
                </div>
                <div class="col col-2 error-state-handler {% if form.time.errors %}has-error{% endif %}">
                    <label for="{{ form.time.id_for_label }}" class="sr-only">
                        {% trans "Choose a time" %}
                    </label>
                    {% render_field form.time class+="selectpicker form-control" required="required" %}
                    {{ form.time.errors }}
                </div>
            </div>
        </div>

        <div class="form-group email-container {% if form.email.errors %}has-error{% endif %}" style="display:none;">
            <label for="{{ form.email.id_for_label }}" class="control-label required">
                <span class="label-text">{% trans "Email" %}</span>
               <span class="required-symbol"><span class="sr-only">{% trans "(required)" %}</span></span>
            </label>
            {% render_field form.email class+="form-control" required="required" %}
            {{ form.email.errors }}
        </div>

        {# utility block #}
        {% block form_fields_after %}
        {% endblock form_fields_after %}

        {% block form_btn_container %}
            <div class="form-group btn-container">

                {# utility block #}
                {% block form_btn_container_before %}
                {% endblock form_btn_container_before %}

                {% trans "Submit" as cta %}
                <button class="{% block form_submit_btn_classes_container %}btn btn-{% block form_submit_btn_variation %}default{% endblock form_submit_btn_variation %}{% endblock form_submit_btn_classes_container %}" name="submit" type="submit">{{ cta }}</button>

                {# utility block #}
                {% block form_btn_container_after %}
                {% endblock form_btn_container_after %}

            </div>
        {% endblock form_btn_container %}

        {# utility block #}
        {% block form_inner_after %}
        {% endblock form_inner_after %}

    </form>
{% endblock form_container %}
