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

{% block title %}{% endblock %}

{% block body %}
    <section class="faq-area-02 pt-130 pb-90">
        <div class="container">
            <div class="row">
                <div class="col-xl-4 col-lg-4 col-md-12">
                    <div class="widget mb-40">
                        <div class="widget__title__box">
                            <h2 class="widget-title">Newsletters</h2>
                        </div>
                        <div class="catagory-list">
                            <ul class="cat">
                                <li><a href="{{ path('save_the_date') }}">Save the date <span class="f-right"><i class="fas fa-chevron-right"></i></span></a></li>
                                <li><a href="{{ path('news') }}">Actualités <span class="f-right"><i class="fas fa-chevron-right"></i></span></a></li>
                                <li><a href="{{ path('archives') }}">Archives <span class="f-right"><i class="fas fa-chevron-right"></i></span></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="widget mb-40">
                        <form action="{{ path('newsletter_subscribe') }}" method="POST" class="form-area form-area-02 row no-gutters pb-50">
                            <div class="col-12">
                                <div class="widget__title__box mb-30">
                                    <h2 class="widget-title-02">Newsletters</h2>
                                </div>
                                <p class="form-para">{{ 'newsletters_text_01'|trans }}</p>
                            </div>

                            <div class="col-12">
                                <div class="contact-mail pos-rel mb-15">
                                    <input type="email" id="email" name="email" class="form-control" placeholder="Email" required>
                                    <span><i class="far fa-envelope-open-text"></i></span>
                                </div>
                            </div>

                            <div class="col-12">
                                <button class="theme_btn theme_btn2 ml-40" style="border: 0;" type="submit">{{ 'subscribe'|trans }}</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-xl-8 col-lg-8 col-md-12">
                    <div class="row align-items-center mb-60">
                        <div class="col-6">
                            {# <h3 class="blog-list-title m-0">Newsletters</h3> #}
                        </div>

                        <div class="col-6">
                            <form method="get" action="{{ path('newsletters') }}" class="mb-4">
                                <div class="form-group d-flex justify-content-end">
                                    <select name="date" class="form-select form-control" onchange="this.form.submit()" style="width: max-content;">
                                        <option value="all" {% if app.request.get('date') == 'all' %}selected{% endif %}>Tous</option>
                                        {% set currentYear = "now"|date("Y") %}
                                        {% for year in currentYear..(currentYear - 3) %}
                                            <option value="{{ year }}" {% if app.request.get('date') == year %}selected{% endif %}>{{ year }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </form>
                        </div>
                    </div>

                    {% set mois = {
                        'January': 'Janvier', 'February': 'Février', 'March': 'Mars', 'April': 'Avril',
                        'May': 'Mai', 'June': 'Juin', 'July': 'Juillet', 'August': 'Août',
                        'September': 'Septembre', 'October': 'Octobre', 'November': 'Novembre', 'December': 'Décembre'
                    } %}

                    <div class="row">
                        {% for n in newsletters %}
                            <div class="col-6">
                                <div class="popular mb-30">
                                    <div class="popular__img pos-rel mb-20">
                                        <div class="popoular__img__inner">
                                            <img src="{{ n.photo }}" alt="" width="370" height="270" style="object-fit: cover;">
                                        </div>
                                    </div>
                                    <div class="popular__content pl-20 pr-20 text-center">
                                        <h5>{{ mois[n.date|date('F')] }} {{ n.date|date('Y') }}</h5>
                                        <p style="height: 84px; overflow: auto;">{{ n.description }}</p>
                                    </div>
                                    <a target="_blank" href="{{ n.pdf }}">Ouvrir</a>
                                </div>
                            </div>
                        {% else %}
                            <p class="w-100 text-center">Aucune newsletter trouvée.</p>
                        {% endfor %}
                    </div>

                    <div class="d-flex justify-content-center mt-30">
                        {{ knp_pagination_render(newsletters) }}
                    </div>
                </div>
            </div>

            <section class="blog-area blog-area-two pt-120">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-7 m-auto">
                            <div class="section-title text-center mb-80">
                                <span class="left-line mb-15 pl-20">Contact & Adhésion</span>
                                <h2 class="mb-35" style="font-size: 38px;">Adhérez à l'Association</h2>
                                <p class="mb-30">
                                    La préservation à long terme de l'exceptionnel patrimoine culturel et naturel des rosiers
                                    luxembourgeois anciens et nouveaux est importante, cela ne peut se faire sans un soutien
                                    solidaire.
                                </p>
                                <p>Devenez membre ou membre d'honneur de notre ASBL.</p>
                                <a href="{{ path('about') }}" class="theme_btn mt-2">Adhérez</a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>
    </section>
{% endblock %}