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

{% block title %}{{page.title}}{% endblock %}
{% block meta_desc %}
    {{page.introduction[:150]|striptags|raw }}
{% endblock %}

{% block body %}
    <section class="post-area">
        <span class="after-search-anchor"></span>
        <h2>{{page.mainTitle}}</h2>
        {{page.introduction|raw}}
        <div class="js-filter">
            <div class="post-flex">
                {# <div class="items-filters-ctn-small">
                    <button class="items-filters-open-btn" type="button" data-bs-toggle="collapse-filters" data-bs-target="#collapse-filters" aria-expanded="false" aria-controls="collapse-filters">
                        Filtrer <i class="fas fa-filter"></i>
                    </button>
                    <div class="items-filters-to-open" id="collapse-filters">
                        {% include "post/_filters.html.twig" %}
                    </div>
                </div> #}
                <aside class="items-filters-ctn">
                    <button class="items-filters-open-btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-filters" aria-expanded="false" aria-controls="collapse-filters">
                        Filtres <i class="fas fa-filter"></i>
                    </button>
                    <div class="items-filters-to-open" id="collapse-filters">
                        {% include "post/_filters.html.twig" %}
                    </div>
                </aside>
                <div class="post-ctn">
                    <div class="content-title-ctn">
                        <h3 class="content-title">{{page.postCtnTitle}}</h3>
                        <div class="d-flex justify-content-end js-filter-sorting">
                            {% include "post/_sorting.html.twig" %}
                        </div>
                    </div>
                    <div class="items-flex js-filter-content">
                        {% include "post/_posts.html.twig" %}
                    </div>
                </div>
            </div>
            <div class="pagination-ctn mt-5 d-flex justify-content-end js-filter-pagination" {% if ratio <= 1 %}style="visibility:hidden;"{% endif %}>
                {% include "post/_pagination.html.twig" %}
            </div>
        </div>
    </section>
{% endblock %}

{% block javascripts %}
	<script defer src="/particles/particles.min.js"></script>
{% endblock %}