{% extends "@templates/"~template~"/view/base.html.twig" %}

{% block javascript %}
    {{ parent() }}
    <script src="{{ asset('media/Public/vendor/swiper/dist/js/swiper.min.js') }}"></script>
    <script src="{{ asset('templates/Front/'~template~'/assets/js/home.js') }}"></script>
{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
    <section class="banner">
        <div class="bannerCarousel owl-carousel">
            {% set banners = getBanners(1) %}
            {% if banners|length > 1 %}
            <div class="swiper-container">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    {% for banner in banners %}
                        <div class="swiper-slide">
                            <div class="itemBanner">
                                <div class="bannerImg">
                                    <img src="{{ asset('media/assets/Banner/'~banner.imageURL) }}" alt="">
                                </div>
                                <div class="bannerInfo">
                                    {{ banner.content|raw }}
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    <!-- If we need pagination -->
                    <div class="swiper-pagination"></div>

                    <!-- If we need navigation buttons -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                    <!-- If we need scrollbar -->
                    <div class="swiper-scrollbar"></div>
                </div>
            {% else %}
                {% for banner in banners %}
                    <div class="itemBanner">
                        <div class="bannerImg">
                            <img src="{{ asset('media/assets/Banner/'~banner.imageURL) }}" alt="">
                        </div>
                        <div class="bannerInfo">
                            {{ banner.content|raw }}
                        </div>
                    </div>
                {% endfor %}
            {% endif %}
        </div>
    </section>
    <section class="frontPage">
        <article>
            {{ page.content|raw }}
        </article>
    </section>
{% endblock %}
