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

{% block title %}{{ article.getLocalizedTitle(app.request.locale) }} — {{ 'nav.library'|trans }}{% endblock %}

{% block body %}
    <section class="article-hero">
        <div class="container">
            <span class="badge {{ article.type == 'report' ? 'badge-dark' }}">{{ article.type == 'report' ? 'library.badge_report'|trans : 'library.badge_article'|trans }}</span>
            <h1 style="margin-top: 16px;">{{ article.getLocalizedTitle(app.request.locale) }}</h1>
            <div class="article-meta">
                {% if article.author %}
                    <div class="author-chip">
                        {% if article.author.photoName %}
                            <img src="{{ vich_uploader_asset(article.author, 'photoFile') }}" alt="{{ article.author.name }}">
                        {% endif %}
                        <span>✍️ {{ article.author.name }}</span>
                    </div>
                {% endif %}
                {% if article.publishedAt %}<span>🗓️ {{ article.publishedAt|date('d/m/Y') }}</span>{% endif %}
            </div>
        </div>
    </section>

    <section class="section">
        <div class="container">
            {% if article.imageName %}
                <img class="article-cover" src="{{ vich_uploader_asset(article, 'imageFile') }}" alt="{{ article.getLocalizedTitle(app.request.locale) }}">
            {% endif %}

            <div class="article-body">
                {{ article.getLocalizedContent(app.request.locale)|nl2br }}
            </div>

            {% if article.documentName %}
                <br>
                <a href="{{ vich_uploader_asset(article, 'documentFile') }}" class="btn btn-primary" target="_blank" rel="noopener">{{ 'article.read_document'|trans }}</a>
            {% endif %}

            {# ============ DIAPORAMA DE L'ARTICLE ============ #}
            {% if article.images is not empty %}
                <div class="gallery">
                    <div class="gallery-track" id="galleryTrack">
                        {% for image in article.images %}
                            <figure class="gallery-item">
                                <img src="{{ vich_uploader_asset(image, 'imageFile') }}" alt="{{ image.caption ?? article.getLocalizedTitle(app.request.locale) }}">
                                {% if image.caption %}<figcaption>{{ image.caption }}</figcaption>{% endif %}
                            </figure>
                        {% endfor %}
                    </div>
                    {% if article.images|length > 1 %}
                        <button class="gallery-btn prev" type="button" aria-label="{{ 'article.gallery_prev'|trans }}"><span class="dir-arrow">‹</span></button>
                        <button class="gallery-btn next" type="button" aria-label="{{ 'article.gallery_next'|trans }}"><span class="dir-arrow">›</span></button>
                    {% endif %}
                </div>
            {% endif %}

            <br>
            <a href="{{ path('app_library') }}" class="btn btn-outline"><span class="dir-arrow">←</span> {{ 'library.back_to_library'|trans }}</a>
        </div>
    </section>
{% endblock %}

{% block javascripts %}
    <script>
        (function () {
            const track = document.getElementById('galleryTrack');
            if (!track) return;

            const isRtl = {{ app.request.locale == 'ar' ? 'true' : 'false' }};
            const items = track.children.length;
            let index = 0;

            function go(delta) {
                index = (index + delta + items) % items;
                const offset = index * 100 * (isRtl ? 1 : -1);
                track.style.transform = 'translateX(' + offset + '%)';
            }

            const prev = document.querySelector('.gallery-btn.prev');
            const next = document.querySelector('.gallery-btn.next');
            if (prev) prev.addEventListener('click', function () { go(-1); });
            if (next) next.addEventListener('click', function () { go(1); });
        })();
    </script>
{% endblock %}