{% extends 'base.html.twig' %}
{% block title %}{{ article.title }}{% endblock %}

{% block body %}
    <section class="container-lg px-4 py-5 pt-lg-5 mt-5">
        <nav aria-label="Fil d'Ariane" class="mb-3">
            <ol class="breadcrumb bg-transparent px-0 py-5 border-bottom">
                <li class="breadcrumb-item">
                    <a href="{{ path('actus_index') }}" class="text-decoration-none">Actus</a>
                </li>
                <li class="breadcrumb-item active" aria-current="page">{{ article.title }}</li>
            </ol>
        </nav>

        <div class="row g-4">
            <div class="col-lg-8">
                <article itemscope itemtype="https://schema.org/Article">
                    <header class="mb-3">
                        <h1 class="display-6 fw-bold mb-2" itemprop="headline">{{ article.title }}</h1>
                        <div class="d-flex flex-wrap gap-2 align-items-center text-muted small">
                            {% if article.publishedAt %}
                                <span title="{{ article.publishedAt|date('Y-m-d H:i') }}">
                <i class="bi bi-calendar-event me-1"></i>
                Publié le {{ article.publishedAt|date('d/m/Y \\à H:i') }}
              </span>
                            {% endif %}
                            {% if article.author is defined and article.author %}
                                <span class="text-body-secondary">
                • <i class="bi bi-person-circle ms-1 me-1"></i>
                {{ article.author.firstName ?? '' }} {{ article.author.lastName ?? '' }}
              </span>
                            {% endif %}
                            {% if article.isMembersOnly %}
                                <span class="badge rounded-pill text-bg-secondary">
                <i class="bi bi-lock me-1"></i> Réservé aux membres
              </span>
                            {% endif %}
                        </div>
                    </header>

                    {% if article.cover %}
                        <figure class="mb-4">
                            <img class="img-fluid rounded shadow-sm w-100"
                                 src="{{ asset('uploads/covers/' ~ article.cover) }}"
                                 alt="{{ article.title }}" itemprop="image" loading="lazy">
                        </figure>
                    {% endif %}

                    <div class="content fs-5" itemprop="articleBody">
                        {{ article.content|raw }}
                    </div>

                    {# --- PIÈCES JOINTES --- #}
                    {% if article.attachments is defined and article.attachments|length > 0 %}
                        <div class="mt-4">
                            <h2 class="h5 mb-3"><i class="bi bi-paperclip me-2"></i>Pièces jointes</h2>
                            <ul class="list-group">
                                {% for att in article.attachments %}
                                    {% set mime = att.mimeType ?? '' %}
                                    {# Mappage d’icônes : utiliser 'in' pour sous-chaînes #}
                                    {% set icon = 'bi-file-earmark' %}
                                    {% if mime starts with 'image/' %}
                                        {% set icon = 'bi-file-image' %}
                                    {% elseif mime starts with 'application/pdf' %}
                                        {% set icon = 'bi-file-earmark-pdf' %}
                                    {% elseif mime starts with 'video/' %}
                                        {% set icon = 'bi-file-play' %}
                                    {% elseif mime starts with 'audio/' %}
                                        {% set icon = 'bi-file-music' %}
                                    {% elseif mime starts with 'application/vnd.ms-excel' or 'spreadsheet' in mime %}
                                        {% set icon = 'bi-file-earmark-excel' %}
                                    {% elseif 'word' in mime %}
                                        {% set icon = 'bi-file-earmark-word' %}
                                    {% endif %}

                                    <li class="list-group-item d-flex justify-content-between align-items-center gap-3">
                                        <div class="d-flex align-items-center gap-2 text-truncate">
                                            <i class="bi {{ icon }} fs-5 text-secondary"></i>
                                            <span class="text-truncate">{{ att.title ?? att.originalName }}</span>
                                        </div>
                                        <div class="d-flex align-items-center gap-2">
                    <span class="text-muted small">
                      {{ (att.size/1024)|number_format(0, ',', ' ') }} Ko
                    </span>
                                            {# TODO : remplacer par ta route de téléchargement sécurisé quand tu l’auras #}
                                            <a class="btn btn-sm btn-outline-secondary"
                                               href="{{ asset('uploads/attachments/' ~ att.fileName) }}"
                                               target="_blank" rel="noopener">
                                                <i class="bi bi-download me-1"></i>Télécharger
                                            </a>
                                        </div>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    {% endif %}

                    {# Navigation Précédent/Suivant optionnelle #}
                    {% if prev is defined or next is defined %}
                        <hr class="my-4">
                        <nav class="d-flex justify-content-between">
                            <div>
                                {% if prev is defined and prev %}
                                    <a class="btn btn-outline-dark" href="{{ path('actus_show', { slug: prev.slug }) }}">
                                        <i class="bi bi-arrow-left me-1"></i> {{ prev.title }}
                                    </a>
                                {% endif %}
                            </div>
                            <div>
                                {% if next is defined and next %}
                                    <a class="btn btn-outline-dark" href="{{ path('actus_show', { slug: next.slug }) }}">
                                        {{ next.title }} <i class="bi bi-arrow-right ms-1"></i>
                                    </a>
                                {% endif %}
                            </div>
                        </nav>
                    {% endif %}
                </article>
            </div>

            <aside class="col-lg-4">
                <div class="position-sticky" style="top: 6rem;">
                    <div class="card shadow-sm mb-3">
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <a href="{{ path('actus_index') }}" class="btn btn-outline-dark">
                                    <i class="bi bi-chevron-left me-1"></i>Retour aux actus
                                </a>
                                <button class="btn btn-dark" id="copyLinkBtn" type="button">
                                    <i class="bi bi-link-45deg me-1"></i>Copier le lien
                                </button>
                                <a class="btn btn-outline-secondary"
                                   href="mailto:?subject={{ article.title|url_encode }}&body={{ app.request.uri|url_encode }}">
                                    <i class="bi bi-envelope me-1"></i>Partager par e-mail
                                </a>
                            </div>
                        </div>
                    </div>

                    {% if article.author is defined and article.author %}
                        <div class="card shadow-sm">
                            <div class="card-body">
                                <h2 class="h6 text-uppercase text-muted mb-3">À propos de l’auteur</h2>
                                <div class="d-flex align-items-center gap-3">
                                    <i class="bi bi-person-circle fs-1 text-secondary"></i>
                                    <div>
                                        <div class="fw-semibold">
                                            {{ article.author.firstName ?? '' }} {{ article.author.lastName ?? '' }}
                                        </div>
                                        {% if article.publishedAt %}
                                            <div class="small text-muted">
                                                Publié le {{ article.publishedAt|date('d/m/Y') }}
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </aside>
        </div>
    </section>

    <script>
        (function () {
            const btn = document.getElementById('copyLinkBtn');
            if (!btn) return;
            btn.addEventListener('click', async () => {
                try {
                    await navigator.clipboard.writeText(window.location.href);
                    btn.classList.replace('btn-dark','btn-success');
                    btn.innerHTML = '<i class="bi bi-check2 me-1"></i>Lien copié';
                    setTimeout(() => {
                        btn.classList.replace('btn-success','btn-dark');
                        btn.innerHTML = '<i class="bi bi-link-45deg me-1"></i>Copier le lien';
                    }, 2500);
                } catch (e) {}
            });
        })();
    </script>
{% endblock %}