description = "Contact 4 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"
==
{% set total = 12 %}
{% set size_1 = data.section_contact4_size %}
{% set size_2 = total - size_1 %}
{% if size_1 == 12 %}
{% set size_2 = total %}
{% endif %}
<div {% if data.section_contact4_id %}id="{{ data.section_contact4_id }}"{% endif %} class="contact4 position-relative bg-cover mb-36 py-16" 
{% if data.section_contact4_bimage %}style="background-image:url({{ data.section_contact4_bimage|media|resize(1920, 650, { mode: 'crop' }) }})"{% endif %}
>
<div class="position-absolute pos-0 {{ data.section_contact4_opacity }} {{ data.section_contact4_overlay }} overflow-hidden w-100 h-100"></div>
    <div class="{{ data.section_contact4_container }}">
        <!-- Row  -->
        {% if data.section_contact4_header or data.section_contact4_subheader %}
        <div class="row justify-content-center position-relative pos-t-20">
            <div class="col-md-7 text-center">
                <h2 class="pt-5 pb-4 {{ data.section_contact4_overlay == 'bg-dark' ? 'text-white' }}">{{ data.section_contact4_header }}</h2>
                <h6 class="line-height-normal {{ data.section_contact4_overlay == 'bg-dark' ? 'text-white' }}">{{ data.section_contact4_subheader }}</h6>
            </div>
        </div>
        {% endif %}
        <!-- Row  -->
        <div class="row position-relative pos-t-40">
            <div class="col-lg-12" {% if data.section_contact4_animation %}data-aos="fade-up" data-aos-duration="2000"{% endif %}>
                <div class="card border-0 shadow">
                    <div class="row">
                        <div class="col-lg-{{ size_1 }} {% if size_1 == 12 %}text-center mx-auto{% endif %}">
                            <div class="p-10">
                                {% if data.section_contact4_ftitle %}<h4 class="pt-5 pb-4">{{ data.section_contact4_ftitle }}</h4>{% endif %}
                                <form data-request="{{ genericForm }}::onFormSubmit">
                                {{ form_token() }}
                                <div id="{{ genericForm }}_forms_flash"></div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="form-group mt-4">
                                                <input class="form-control border-2 hover-border-default p-6" id="name" name="name" type="text" placeholder="Name">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group mt-4">
                                                <input class="form-control border-2 hover-border-default p-6" id="email" type="text" name="email" placeholder="Email">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group mt-4">
                                                <input class="form-control border-2 hover-border-default p-6" id="subject" type="text" name="subject" placeholder="Subject">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="form-group mt-4">
                                                <input class="form-control border-2 hover-border-default p-6" id="phone" type="text" name="phone" placeholder="Phone">
                                            </div>
                                        </div>
                                        <div class="col-lg-12">
                                            <div class="form-group mt-4">
                                                <textarea class="form-control border-2 hover-border-default p-6" id="comments" name="comments" rows="4" placeholder="Message"></textarea>
                                            </div>
                                        </div>    
                                        <div class="col-lg-12">
                                            <div class="form-group mt-4">
                                            {% 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 class="col-lg-12">
                                            <button id="simpleContactSubmitButton" type="submit" class="btn bx10 btn-default text-white mt-4 btn-chevron"><span> SUBMIT <i class="fas fa-chevron-right"></i></span></button>
                                        </div>
                                    </div> 
                                </form>
                            </div>
                        </div>
                        {% if size_1 != 12 %}
                        <div class="col-lg-{{ size_2 }} bg-cover" style="background-image:url({{ data.section_contact4_fimage|media|resize(500, 700, { mode: 'crop' }) }})">
                            <div class="position-absolute pos-0 bg-black-50 overflow-hidden w-100 h-100"></div>
                            <div class="p-10 position-relative">
                                {% for fields in data.section_contact4_infos %}
                                <div class="mb-10">
                                    {% if fields.section_contact4_info_title %}<h4 class="text-white font-weight-light mb-6">{{ fields.section_contact4_info_title }}</h4>{% endif %}
                                    {% for info in fields.section_contact4_info %}
                                    {% if info.section_contact4_info_url %}<a class="" href="{{ info.section_contact4_info_url }}">{% endif %}
                                    <p class="text-white mb-0 opacity-75">{{ info.section_contact4_info_text }}</p>
                                    {% if info.section_contact4_info_url %}</a>{% endif %}
                                    {% endfor %}
                                </div>
                                {% endfor %}
                                {% if data.section_contact4_social %}
                                {% if data.section_contact4_stitle %}<h4 class="text-white font-weight-light mb-6">{{ data.section_contact4_stitle }}</h4>{% endif %}
                                <ul class="list-inline">
                                    {% for fields in data.section_contact4_social %}
                                    <li class="list-inline-item">
                                        <a class="d-flex justify-content-center align-items-center btn btn-outline-white rounded-circle p-1 w-10r h-10r" href="{{ fields.section_contact4_social_url }}">
                                            <i class="{{ fields.section_contact4_social_icon }}"></i>
                                        </a>
                                    </li>
                                    {% endfor %}
                                </ul>
                                {% endif %}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>