{% 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">Archives</h2>
                        </div>
                        <div class="catagory-list">
                            <ul class="cat">
                                <li><a href="{{ path('news') }}">{{ 'news'|trans }} <span class="f-right"><i class="fas fa-chevron-right"></i></span></a></li>
                                <li><a href="{{ path('newsletters') }}">Newsletters <span class="f-right"><i class="fas fa-chevron-right"></i></span></a></li>
                                <li><a href="{{ path('save_the_date') }}">Save the date <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">
                        </div>

                        <div class="col-6">
                            <form method="get" action="{{ path('archives') }}" class="mb-4">
                                <div class="form-group d-flex justify-content-end">
                                    <select name="category" class="form-select form-control" onchange="this.form.submit()" style="width: max-content;">
                                        <option value="all" {% if app.request.get('category') == 'all' %}selected{% endif %}>{{ 'all'|trans }}</option>
                                        {% for category in categories %}
                                            {% if newsCountByCategory[category.id]|default(0) > 0 %}
                                                <option value="{{ category.id }}" {% if app.request.get('category') == category.id %}selected{% endif %}>{{ category.name }} ({{ newsCountByCategory[category.id]|default(0) }})</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                            </form>
                        </div>
                    </div>

                    {% for n in news %}
                        <div class="blog-list">
                                <span class="d-inline-block mb-20">
                                    {{ n.title }}
                                </span>
                            <p class="mb-20">
                                {{ n.description }}
                            </p>
                            <div class="blog pr-40 mb-60">
                                <div class="blog__content">
                                    <div class="blog__content--thumb-03 mb-30">
                                        <img src="{{ n.photo }}" alt="">
                                    </div>
                                    <a href="{{ path('detail_news', { id: n.id }) }}" class="theme_btn" style="padding: 15px 19px;">{{ 'read_the_article'|trans }}</a>
                                </div>
                            </div>
                        </div>
                    {% else %}
                        <p class="text-center">{{ 'no_archive_found'|trans }}</p>
                    {% endfor %}


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

                </div>
            </div>

            <section class="blog-area blog-area-two pt-120 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>

        </div>
    </section>

{% endblock %}