{% extends 'front-end-base.html.twig' %}

{% block title %} {{ page_title|default('Contact Us') }} {% endblock %}

{% block body %}

    <!-- ======= Single Blog Section ======= -->
    <section class="hero-section inner-page">
        <div class="wave">

            <svg width="1920px" height="265px" viewBox="0 0 1920 265" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Apple-TV" transform="translate(0.000000, -402.000000)" fill="#FFFFFF">
                        <path d="M0,439.134243 C175.04074,464.89273 327.944386,477.771974 458.710937,477.771974 C654.860765,477.771974 870.645295,442.632362 1205.9828,410.192501 C1429.54114,388.565926 1667.54687,411.092417 1920,477.771974 L1920,667 L1017.15166,667 L0,667 L0,439.134243 Z" id="Path"></path>
                    </g>
                </g>
            </svg>

        </div>

        <div class="container">
            <div class="row align-items-center">
                <div class="col-12">

                    {% if widgets is defined and widgets['contact_page_description'] is defined  and widgets['contact_page_description']|length > 0 %}
                        {% for widget in widgets['contact_page_description'] %}

                            <div class="row justify-content-center">
                                <div class="col-md-10 text-center hero-text">
                                    <h1 data-aos="fade-up" data-aos-delay="">{{ widget.title }}</h1>
                                    <p class="mb-5" data-aos="fade-up" data-aos-delay="100">{{ widget.content|raw }}</p>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="row justify-content-center">
                            <div class="col-md-10 text-center hero-text">
                                <h1 data-aos="fade-up" data-aos-delay="">Contact Us</h1>
                                <p class="mb-5" data-aos="fade-up" data-aos-delay="100">Get in touch with us.</p>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

    </section>

    <section class="section">
        <div class="container">
            <div class="row mb-5 align-items-end">
                <div class="col-md-6" data-aos="fade-up">

                    <h2>Contact Form</h2>
                    <p class="mb-0">Please get in touch us and our friendly consultants will be assist you</p>
                </div>

            </div>

            <div class="row">
                <div class="col-md-4 ms-auto order-2 aos-init aos-animate" data-aos="fade-up">
                    <ul class="list-unstyled">

                        {% if widgets is defined and widgets['contact_details'] is defined  and widgets['contact_details']|length > 0 %}
                            {% for widget in widgets['contact_details'] %}

                                <li class="mb-3">
                                    <strong class="d-block mb-1">{{ widget.title }}</strong>
                                    <span>{{ widget.content|raw|striptags }}</span>
                                </li>
                            {% endfor %}
                        {% else %}
                            <li class="mb-3">
                                <strong class="d-block mb-1">Address</strong>
                                <span>05 Cambray, 27 Ringwood Rd, Lynwood Manor, 0081</span>
                            </li>
                            <li class="mb-3">
                                <strong class="d-block mb-1">Phone</strong>
                                <span>+2711 123 4567</span>
                            </li>
                            <li class="mb-3">
                                <strong class="d-block mb-1">Email</strong>
                                <span>info@corporatehealth.co.za</span>
                            </li>
                        {% endif %}
                    </ul>
                </div>

                <div class="col-md-6 mb-5 mb-md-0 aos-init aos-animate" data-aos="fade-up">
                    {% if submitted is defined and submitted %}
                        {% set alert_class = 'danger' %}
                        {% set alert = 'Error' %}
                        {% if success %}
                            {% set alert_class = 'success' %}
                            {% set alert = 'Success' %}
                        {% endif %}
                        <div class="alert alert-{{ alert_class }} alert-dismissible fade show" role="alert">
                            <strong>{{ alert|title }}!</strong> {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endif %}


                    {{ form_start(form) }}
                    {{ form_end(form) }}
                </div>
            </div>
        </div>
    </section>

{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        $(function () {

        });
    </script>
{% endblock %}