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

{% block content %}
    {% if page.url == "/" %}
    {% else %}
        <article>
            <div id="article-wrapper">
                <div class="article-header">
                    {% if page.parent.title == "Articles" %}
                        <div class="article-siblings">
                            {{ dump(page.parent.collection.prevSibling(page.path)) }}
                            {% if not page.parent.collection.isFirst(page.path) %}
                            <a href="{{ page.parent.collection.nextSibling(page.path).url }}"><i class="fa-solid fa-chevron-left"></i> Article suivant</a>
                            {% else %}
                                <div></div>
                            {% endif %}
                            {% if not page.parent.collection.isLast(page.path) %}
                                <a href="{{ page.parent.collection.prevSibling(page.path).url }}">Article précédent <i class="fa-solid fa-chevron-right"></i></a>
                            {% endif %}
                        </div>
                    {% endif %}
                    <a href="{{ home_url }}" class="close-article">
                        <div></div>
                        <div></div>
                    </a>
                </div>
                <div class="swiper">
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-wrapper">
                        {% for image in page.media.images %}
                        <div class="swiper-slide">
                            <img src="{{ image.url }}" alt="{{ page.title }}">
                        </div>
                        {% endfor %}
                        {% for video in page.media.videos %}
                        <div class="swiper-slide">
                            <video controls src="{{ video.url }}">
                        </div>
                        {% endfor %}
                    </div>
                    <div class="swiper-button-next"></div>
                </div>
                {% if page.parent.title == "Articles" %}
                    <p class="article-date">{{ page.date | date('d/m/Y') }}</p>
                {% endif %}
                <p class="article-titre">{{ page.title }}</p>
                <div class="article-content">{{ page.content|raw }}</div>
            </div>
        </article>
    {% endif %}
{% endblock %}