{% extends 'base_fo.html.twig' %}

{% block title %}{{ page.title }}{% endblock %}

{% block body %}
    {% if page.template == "home" %}
        <main>
            <div class="container">
                <div class="home-text col-md3">
                    <h1>{{ page.title|lower }}</h1>
                    <p class="py-3">
                        {{ page.homeDescription }}
                    </p>
                </div>
                <div class="container pe-0">
                    <div class="row">
                        {% for menu in menus %}
                            {% if menu.isHome %}
                                <div class="col-6 col-md-3 ps-0">
                                    <div class="bloc home shadow-sm" style="background: #{{ menu.background is not empty ? menu.background : '0c5476' }}">
                                        {% set currentMenuPicto = menu.pictoPath is not empty ? asset(menu.pictoPath) : ''  %}
                                        <h2 class="bordered" style="{{ currentMenuPicto ? 'background-image: url('~ currentMenuPicto ~')' : '' }}">
                                            {{ menu.title|lower }}
                                        </h2>
                                        <p>{{ menu.teaser }}</p>
                                        <a href="{{ path('front_page_details', {'id': menu.id, 'slug': menu.title|lower|slug }) }}" class="btn-home">En savoir plus</a>
                                    </div>
                                </div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </main>
    {% else %}
        <div class="container no-padding-mobile">
            <main class="page">
                <div class="container px-0">
                    {% if isMobile() %}
                        {% set currentPageBanner = page.bannerPathMobile is not empty ? asset(page.bannerPathMobile) : 'data/images/banners/banner-nos-services-mobile.jpg'  %}
                    {% else %}
                        {% set currentPageBanner = page.bannerPath is not empty ? asset(page.bannerPath) : 'data/images/banners/banner-nos-services.jpg'  %}
                    {% endif %}
                    <div class="banner" style="{{ currentPageBanner ? 'background-image: url('~ currentPageBanner ~')' : '' }}">
                        {% set currentPageMenuPicto = page.menu.pictoPath is not empty ? asset(page.menu.pictoPath) : ''  %}
                        <h1 style="{{ currentPageMenuPicto ? 'background-image: url('~ currentPageMenuPicto ~')' : '' }}">{{ page.title|lower }}</h1>
                    </div>
                    <div class="content pt-3 px-3">
                        <div class="row">
                            <div class="{{ page.template == "text-image" and page.imagePath is not empty? 'col-12 col-md-6' : '' }} text">
                                {{ page.template == 'text' ? page.onlyTextDescription|raw : page.textImageDescription|raw }}
                            </div>
                            {% if page.template == "text-image" and page.imagePath is not empty %}
                                <div class="col-12 col-md-6">
                                    <div class="shadow my-1 p-0 text-center">
                                        <img class="w-100" src="{{ asset(page.imagePath) }}" alt="image"/>
                                    </div>
                                </div>
                            {% endif %}
                        </div>     
                        <hr/>
                        {% include 'front/_footer_nav.html.twig' %}
                    </div>
                </div>
            </main>
        </div>
    {% endif %}
{% endblock %}