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

{% block title %}Patrimoine Roses | Accueil{% endblock %}

{% block body %}
    <!--about-landco start-->
    <section class="landco-future pb-95 pt-5">
        <div class="container">
            <div class="row">
                <div class="col-xl-6 col-lg-6 col-md-12">
                    <div class="section-title pl-45 mb-5 mb-md-3">
                        <span class="left-line mb-15 pl-20">{{ 'association'|trans }}</span>

                        <h2 class="mb-35" style="font-size: 48px; font-family: serif;">{{ 'homepage_association_title'|trans | nl2br }}</h2>

                        <p class="mb-30">
                            {{ 'homepage_association'|trans }}
                        </p>

                        <a href="{{ path('about') }}" class="theme_btn">{{ 'read_more'|trans }}</a>
                    </div>
                </div>
                <div class="col-xl-6 col-lg-6 col-md-12">
                    <div class="about__img__box pos-rel mb-30 pl-0 pl-md-5">
                        <img class="img-fluid landco-img" src="{{ asset('images/rose01.png') }}" alt="" height="420" width="420">
                        <div class="about__img--leaf d-none d-md-block pos-abl">
                            <img src="{{ asset('images/rose02.png') }}" alt="" width="169" height="189" style="object-fit: cover;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--about-landco end-->

    {% if stds|length > 0 %}
        <!--recent-work-area start-->
        <section class="recent-work-area pos-rel green-bg pt-125 pb-90">
            <div class="work-shape-one pos-abl" style="right: 46px; left: initial;"><img src="{{ asset('images/rose_03.png') }}" alt=""></div>
            <div class="container">
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    {% if stds|length > 1 %}
                        <ol class="carousel-indicators">
                            {% for std in stds %}
                                <li data-target="#carouselExampleIndicators" data-slide-to="{{ loop.index - 1 }}" {% if loop.first %}class="active"{% endif %}></li>
                            {% endfor %}
                        </ol>
                    {% endif %}
                    <div class="carousel-inner">
                        {% for std in stds %}
                            <div class="carousel-item {% if loop.first %}active{% endif %}">
                                <div class="row">
                                    <div class="col-xl-4 col-lg-4 col-md-6">
                                        <div class="text-center pos-rel mb-60">
                                            {% if std.photo %}
                                                <img src="{{ std.photo }}" alt="" class="w-100" style="object-fit: cover;" width="370" height="366">
                                            {% else %}
                                                <img src="{{ asset('images/no_picture.webp') }}" alt="" class="w-100" style="object-fit: cover;" width="370" height="366">
                                            {% endif %}
                                        </div>
                                    </div>

                                    <div class="col-xl-7 col-lg-8 col-md-6">
                                        <div class="section-title pl-0 pl-md-5 mb-30">
                                            <span class="left-line mb-15 pl-20">Save the date{% if std.date and std.hideDate == false %} - {{ std.date|date('d/m/Y') }}{% endif %}</span>
                                            <h2 class="mb-35" style="font-size: 46px; font-family: serif; max-width: 600px;">
                                                {{ std.title|length > 50 ? std.title|slice(0, 50) ~ ' ...' : std.title }}
                                            </h2>
                                            <p class="mb-30 text-white" style="max-width: 500px;">
                                                {{ std.description|length > 185 ? std.description|slice(0, 185) ~ ' ...' : std.description }}
                                            </p>
                                            {% if std.registerBtn %}
                                                <a href="{{ path('save_the_date') }}#register" class="theme_btn">{{ 'i_register'|trans }}</a>
                                            {% else %}
                                                <a href="{{ path('save_the_date') }}" class="theme_btn">{{ 'read_the_article'|trans }}</a>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </section>
        <!--recent-work-area end-->
    {% endif %}

    {% if news|length > 0 %}
        <!--blog-area start-->
        <section class="blog-area blog-area-two pt-120 pb-100">
            <div class="container">
                <div class="row">
                    <div class="col-xl-7">
                        <div class="section-title">
                            <span class="left-line mb-15 pl-20">{{ 'news'|trans }} & Save the date</span>
                            <h2 class="mb-35" style="font-size: 38px;">{{ 'news'|trans }}</h2>
                            <p class="mb-30">
                                {{ 'homepage_news'|trans }}
                            </p>
                        </div>
                    </div>
                </div>

                <div class="row align-items-center">
                    {% for n in news %}
                        <div class="col-xl-4 col-lg-4 col-md-6">
                            <div class="blog blog-border mb-30">
                                <div class="blog__content">
                                    <div class="blog__content--meta mb-20">
                                        <a href="#"><i class="far fa-user-circle"></i> Patrimoine Roses</a>
                                        <a href="#"><i class="far fa-calendar-alt"></i> {{ n.createdAt|date('d/m/Y') }}</a>
                                    </div>
                                    <div class="blog__content--thumb-03 mb-25">
                                        {% if n.photo %}
                                            <img src="{{ n.photo }}" alt="" height="240" style="object-fit: cover;">
                                        {% else %}
                                            <img src="{{ asset('images/no_picture.webp') }}" alt="" class="w-100" style="object-fit: cover;" height="240">
                                        {% endif %}
                                    </div>
                                    <div class="blog__content--catagory mb-10">
                                        <a class="pos-rel" href="#">{{ n.categoryArchives.name }}</a>
                                    </div>
                                    <h5 style="min-height: 82px;">
                                        <a class="mb-30" href="{{ path('detail_news', { id: n.id }) }}" style="font-size: 20px;">
                                            {{ n.title|length > 60 ? n.title|slice(0, 60) ~ ' ...' : n.title }}
                                        </a>
                                    </h5>
                                    <a href="{{ path('detail_news', { id: n.id }) }}" class="theme_btn green_btn">{{ 'read_more'|trans }}</a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </section>
        <!--blog-area end-->
    {% endif %}

    <section class="blog-area blog-area-two pt-20 pb-100">
        <div class="container">
            <div class="row">
                <div class="col-xl-7 m-auto">
                    <div class="section-title text-center">
                        <span class="left-line mb-15 pl-20">{{ 'contact_and_membership'|trans }}</span>
                        <h2 class="mb-35" style="font-size: 46px; font-family: serif;">{{ 'join_the_association'|trans }}</h2>
                        <p class="mb-30">
                            {{ 'join_the_association_text'|trans | nl2br  }}
                        </p>
                        <a href="{{ path('contact') }}" class="theme_btn mt-2">{{ 'join'|trans }}</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}