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

{% block title %}Accueil | {{ parent() }}{% endblock %}

{% block body %}
    <div id="banner" class="homepage container-fluid">
        <div class="slider-homepage">
            <div class="slider-img" style="background-image: url({{ asset('frontend/images/slid/banner-4.png') }}); ">
                <div class="container">
                    <div class="slide-content">
                        <h1>{{ app_name }}</h1>
                        <p><strong>{{ app_description }}</strong></p><br>
                        <p>{{ app_slogan }}</p>
                        <a class="btn btn-primary" href="{{ path('app_front_end_qui_sommes_nous') }}">Ensemble, nous sommes plus forts</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section id="news-events">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <h2>Dernières actualités</h2>
                    {% for actualite in actualites %}
                        <div class="card news">
                            <div class="news__image">
                                <img class="card-img" src="{{ vich_uploader_asset(actualite, 'imageFile') }}" alt="Découvrez notre outil de calcul de loyer indexé">
                            </div>
                            <div class="news__text">
                                <span class="highlight"><i class="fas fa-star"></i></span>
                                <div class="news__cat">
                                    <a href="{{ path('app_front_end_actualite_show', {'id': actualite.id}) }}" class="badge bg-secondary">{{ actualite.cmsArticleCategory ? actualite.cmsArticleCategory.title : 'Actualité' }}</a>
                                </div>
                                <h3 class="card-title"><a href="{{ path('app_front_end_actualite_show', {'id': actualite.id}) }}">{{ actualite.title }}</a></h3>
                                <div class="card-text">
                                    <div class="row">
                                        <div class="col-lg-7">
                                            <p>Publié le {{ actualite.createdAt ? actualite.createdAt|date('d/m/Y') : '' }}</p>
                                        </div>
                                        <div class="col-lg-5 text-right">
                                            <a href="{{ path('app_front_end_actualite_show', {'id': actualite.id}) }}" class="card-link">Lire la suite</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    <p class="text-right"><a href="{{ path('app_front_end_actualites') }}" class="btn btn-primary">Voir toutes les actualités</a></p>
                </div>
                <div class="col-lg-6">
                    <h2>Prochains évènements</h2>
                    {% for evenement in evenements %}
                        <div class="card news">
                            <div class="news__image">
                                <img class="card-img" src="{{ vich_uploader_asset(evenement, 'imageFile') }}" alt="Découvrez notre outil de calcul de loyer indexé">
                            </div>
                            <div class="news__text">
                                <span class="highlight"><i class="fas fa-star"></i></span>
                                <div class="news__cat">
                                    <a href="{{ path('app_front_end_evenement_show', {'id': evenement.id}) }}" class="badge bg-secondary">{{ evenement.cmsArticleCategory ? evenement.cmsArticleCategory.title : 'Actualité' }}</a>
                                </div>
                                <h3 class="card-title"><a href="{{ path('app_front_end_evenement_show', {'id': evenement.id}) }}">{{ evenement.title }}</a></h3>
                                <div class="card-text">
                                    <div class="row">
                                        <div class="col-lg-7">
                                            <p>Publié le {{ evenement.createdAt ? evenement.createdAt|date('d/m/Y') : '' }}</p>
                                        </div>
                                        <div class="col-lg-5 text-right">
                                            <a href="{{ path('app_front_end_evenement_show', {'id': evenement.id}) }}" class="card-link">En savoir plus</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                    <p class="text-right"><a href="{{ path('app_front_end_evenements') }}" class="btn btn-primary">Voir tous les évènements</a></p>
                </div>
            </div>
        </div>
    </section>
    <section id="themes">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2>Thématiques</h2>
                </div>
            </div>
            <div class="row slider-themes">
                {% for thematique in thematiques %}
                    <div class="col-12 anim">
                        <figure class="effect-oscar">
                            <img src="{{ vich_uploader_asset(thematique, 'imageFile') }}" alt="Achat" />
                            <figcaption id="figcaption12" class="theme-color" data-color="#1CA5D3">
                                {# <img class="thematique__icon" src="https://www.federia.immo/images/them/achat-white_imageorigi.svg"> #}
                                <h3>{{ thematique.title }}</h3>
                                <p>{{ thematique.description|slice(0, 128) }}...</p>
                                <a href="#">Voir plus</a>
                            </figcaption>
                        </figure>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
    <section id="avantages">
        <div class="container">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-lg-6">
                    <h2>Avantages membres !</h2>
                    <p>
                        {{ sectionAvantage ? sectionAvantage.description : '' }}
                    </p> 
                    <a href="{{ path('app_front_end_avantages') }}" class="btn btn-primary">Voir tous les avantages</a>
                </div>
                {% if null != sectionAvantage %}
                    <div class="col-lg-6 justify-content-end d-none d-lg-flex">
                        <div class="avantages-container d-flex flex-wrap">
                            <div class="row no-gutters">
                                {% for cmsArticle in sectionAvantage.cmsArticles %}
                                    <div class="col-lg-6">
                                        <a href="#" class="avantage-wrapper b-rb">
                                            <img src="{{ vich_uploader_asset(cmsArticle, 'imageFile') }}" alt="" style="width: 100px;">
                                            <h3>{{ cmsArticle.title }}</h3>
                                        </a>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </section>
    <section id="publications">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h2>Nos outils</h2>
                </div>
            </div>
            <div class="row slider-publications">
                {% for outil in outils %}
                    <div class="col-lg-3 anim">
                        <figure class="effect-oscar">
                            <img src="{{ vich_uploader_asset(outil, 'imageFile') }}" alt="Federiamag" />
                            <figcaption class="federiamag">
                                <h3 class="publication">{{ outil.title }}</h3>
                                <p class="publication">{{ outil.description }}</p>
                                <a href="#">Voir plus</a>
                            </figcaption>
                        </figure>
                    </div>
                {% endfor %}
            </div>
        </div>
    </section>
{% endblock %}