description = "Contact 2 Section"

[viewBag]

[genericForm]
rules[name] = "required"
rules[email] = "required|email"
rules[phone] = "required|number"
messages_success = "Your form was successfully submitted"
messages_errors = "There were errors with your submission"
inline_errors = "disabled"
allowed_fields[] = "name"
allowed_fields[] = "email"
allowed_fields[] = "subject"
allowed_fields[] = "comments"
allowed_fields[] = "phone"
sanitize_data = "disabled"
anonymize_ip = "disabled"
recaptcha_theme = "light"
recaptcha_type = "image"
recaptcha_size = "normal"
skip_database = 0
==
<div {% if data.section_contact2_id %}id="{{ data.section_contact2_id }}"{% endif %} class="contact2 py-24 {{ data.section_contact2_bg }}">
    <div class="{{ data.section_contact2_container }}">
        <!-- Row  -->
        {% if data.section_contact2_header or data.section_contact2_subheader %}
        <div class="row mb-10 justify-content-center">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4">{{ data.section_contact2_header }}</h2>
                <h6 class="text-body line-height-normal">{{ data.section_contact2_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
                <div class="row">
                    <div class="col-lg-{{ data.section_contact2_size }} mb-12 mx-auto" {% if data.section_contact2_animation %}data-aos="fade-up" data-aos-duration="1200"{% endif %}>
                        
                        {% if data.section_contact2_ftitle %}<h4 class="pt-5 pb-4 font-weight-medium display-8 text-center">{{ data.section_contact2_ftitle }}</h4>{% endif %}
                        <form data-request="{{ genericForm }}::onFormSubmit">
                        {{ form_token() }}
                        <div id="{{ genericForm }}_forms_flash"></div>
                        <div class="row">
                            <div class="col-lg-5">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group mb-4 text-dark">
                                            <label for="name">Name</label>
                                            <input class="form-control border-2 hover-border-default p-7" id="name" name="name" type="text">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group mb-4 text-dark">
                                            <label for="email">Email</label>
                                            <input class="form-control border-2 hover-border-default p-7" id="email" type="text" name="email">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group mb-4 text-dark">
                                            <label for="subject">Subject</label>
                                            <input class="form-control border-2 hover-border-default p-7" id="subject" type="text" name="subject">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group mb-4 text-dark">
                                            <label for="phone">Phone</label>
                                            <input class="form-control border-2 hover-border-default p-7" id="phone" type="text" name="phone">
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="form-group mb-4 text-dark">
                                        {% if (recaptcha_enabled) %}
                                            <div id="{{ genericForm }}" class="g-recaptcha" data-sitekey="{{ genericForm.settings.recaptcha_site_key }}" data-theme="{{ genericForm.property('recaptcha_theme') }}" data-type="{{ genericForm.property('recaptcha_type') }}" data-size="{{ genericForm.property('recaptcha_size') }}"></div>
                                        {% elseif (recaptcha_misconfigured) %}
                                            <h5>{{ recaptcha_warn }}</h5>
                                        {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-7">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="form-group mb-4 text-dark">
                                            <label for="comments">Message</label>
                                            <textarea class="form-control border-2 hover-border-default p-7" id="comments" name="comments" rows="9"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-lg-12 text-right">
                                        <button id="simpleContactSubmitButton" type="submit" class="btn btn-lg btn-outline-default mt-5 btn-chevron"><span> SUBMIT <i class="fas fa-chevron-right"></i></span></button>
                                    </div>
                                </div>
                            </div>
                            </div>
                        </form>
                        
                    </div>
                </div>
                {% if data.section_contact2_infos or data.section_contact2_social %}
                <div class="row">
                    {% if data.section_contact2_infos|length == 1  %}
                    {% set size = 6 %}
                    {% elseif data.section_contact2_infos|length == 2  %}
                    {% set size = 4 %}
                    {% elseif data.section_contact2_infos|length == 3  %}
                    {% set size = 3 %}
                    {% endif %}
                    {% set aos = ['flip-left', 'flip-up', 'flip-down'] %}
                    
                    {% for fields in data.section_contact2_infos %}
                    <div class="col-lg-{{ size }} mb-7 px-12 border-r-1" {% if data.section_contact2_animation %}data-aos="{{ aos[ loop.index0 % 6 ] }}" data-aos-duration="1200"{% endif %}>
                        {% if fields.section_contact2_info_title %}<h4 class="pt-5 pb-4 text-center">{{ fields.section_contact2_info_title }}</h4>{% endif %}
                        <ul class="list-inline">
                        {% for info in fields.section_contact2_info %}
                        <li class="py-2 d-flex align-items-center">
                            {% if info.section_contact2_info_url %}<a class="d-flex" href="{{ info.section_contact2_info_url }}">{% endif %}
                                {% if info.section_contact2_info_icon %}<i class="{{ info.section_contact2_info_icon }} d-flex justify-content-center align-items-center rounded-circle bg-default text-white w-8r h-8r mr-3"></i>{% endif %}
                                {{ info.section_contact2_info_text }}
                            {% if info.section_contact2_info_url %}</a>{% endif %}
                        </li>
                        {% endfor %}
                        </ul>
                    </div>
                    {% endfor %}
                    
                    {% if data.section_contact2_social %}
                    <div class="col-lg-{{ size }} mb-7 px-12 text-center" {% if data.section_contact2_animation %}data-aos="flip-right" data-aos-duration="1200"{% endif %}>
                        {% if data.section_contact2_stitle %}<h4 class="pt-5 pb-4 text-center">{{ data.section_contact2_stitle }}</h4>{% endif %}
                        <ul class="list-inline">
                            {% for fields in data.section_contact2_social %}
                            <li class="list-inline-item">
                                <a class="d-flex justify-content-center align-items-center btn btn-outline-default rounded-circle p-1 w-10r h-10r" href="{{ fields.section_contact2_social_url }}">
                                    <i class="{{ fields.section_contact2_social_icon }}"></i>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>