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

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

{% block body %}
    <!-- ======= Features 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['home_page_description'] is defined  and widgets['home_page_description']|length > 0 %}
                        {% for widget in widgets['home_page_description'] %}
                            <div class="row justify-content-center">
                                <div class="col-md-7 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-7 text-center hero-text">
                            <h1 data-aos="fade-up" data-aos-delay="">Corporate Entrepreneurial Health</h1>
                            <p class="mb-5" data-aos="fade-up" data-aos-delay="100">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </section>

    <!-- ======= Home Section ======= -->
    <section class="section">
        <div class="container">

            <div class="row justify-content-center text-center mb-5">
                <div class="col-md-5" data-aos="fade-up">
                    <h2 class="section-heading">Understand Issues Affecting Your Business</h2>
                </div>
            </div>

            <div class="row">
                {% if widgets is defined and widgets['home_issues_affecting'] is defined  and widgets['home_issues_affecting']|length > 0 %}
                    {% set aosDelay = 0 %}
                    {% for widget in widgets['home_issues_affecting'] %}
                        <div class="col-md-4" data-aos="fade-up" data-aos-delay="{{ aosDelay }}">
                            <div class="feature-1 text-center">
                                <div class="wrap-icon icon-1">
                                    {% if widget.iconClass is defined %}
                                    <i class="{{ widget.iconClass }}"></i>
                                    {% endif %}
                                </div>
                                <h3 class="mb-3">{{ widget.title }}</h3>
                                {{ widget.content|raw }}
                            </div>
                        </div>
                        {% set aosDelay = aosDelay + 100 %}
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </section>

    {% if widgets is defined and widgets['home_big_blocks'] is defined  and widgets['home_big_blocks']|length > 0 %}
        {% set counter = 1 %}
        {% for widget in widgets['home_big_blocks'] %}
            {% set alignClass = 'fade-left' %}
            {% set orderClass = 'me-auto' %}
            {% if counter is even  %}
                {% set alignClass = 'fade-right' %}
                {% set orderClass = 'ms-auto order-2' %}
            {% endif %}
            {% set counter = counter + 1 %}

            {% set summaryDots = '' %}

            {% if widget.content|default("")|striptags|length > 500 %}
                {% set summaryDots = '...' %}
            {% endif %}

            <section class="section pb-0 mb-3">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-md-4 {{ orderClass }}">
                            <h2 class="mb-4">{{ widget.title }}</h2>
                            <p class="mb-4">{{ widget.content|default("")|striptags|slice(0, 500)  ~ summaryDots }}</p>
                            <p>

                                {% if widget.link is not null %}
                                    <a href="{{ widget.link }}">Read More</a>
                                {% elseif summaryDots is same as('...') %}
                                    <a href="{{ path('widget_view_page', {'pageId':widget.id, 'title': widget.title}) }}">Read More</a>
                                {% endif %}
                            </p>
                        </div>
                        <div class="col-md-6" data-aos="{{ alignClass }}">
                            {% if widget.imagePath is not null %}
                                <img id="profile-pic-update" class="img-fluid"
                                     src="{{ asset(widgetImagesDirectory ~ widget.imagePath) }}"
                                     alt="Banner "
                                />
                            {% else %}
                                <img src="{{ asset('build/images/undraw_svg_2.svg') }}" alt="Image" class="img-fluid">
                            {% endif %}
                        </div>
                    </div>
                </div>
            </section>
        {% endfor %}
    {% endif %}

    <section>
        <div class="container">
            <div class="row">
                <div class="col-md-12 py-4 my-4">
                    <img class="w-100" alt="Home page banner" src="{{ asset('build/images/home-page-banner.jpeg') }}">
                </div>
            </div>
        </div>
    </section>

{% endblock %}

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

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