{% extends "base.twig" %}

{% block content %}
    <div class="article category--{{ article.parent_slug }}">
        <div class="full-block">
            <div class="category-header-top">
                <nav class="breadcrumb" aria-label="Fil d'Ariane">
                    <a href="{{ function('home_url', '/') }}">{{ current_language == 'en' ? 'Home' : 'Accueil' }}</a>
                    {% if article.parent_name %}
                        <span class="breadcrumb__separator">&rarr;</span>
                        <a class="breadcrumb__cat" href="{{ article.parent_link }}">{{ article.parent_name }}</a>
                    {% endif %}
                    {% if article.category_name and article.category_name != article.parent_name %}
                        <span class="breadcrumb__separator">&rarr;</span>
                        <a class="breadcrumb__cat" href="{{ article.category_link }}">{{ article.category_name }}</a>
                    {% endif %}
                </nav>
                {% if post.edit_link %}
                    <a href="{{ post.edit_link }}" class="link-button" target="_blank" rel="noopener">
                        <i class="iconoir-edit-pencil"></i>{{ current_language == 'en' ? 'Edit post' : 'Éditer l\'annonce' }}
                    </a>
                {% endif %}
            </div>

            <h2>
                <p>{{ post.title | bilingual(current_language) }}</p>
                {% if article.sous_titre %}
                    <p>{{ article.sous_titre }}</p>
                {% endif %}
            </h2>

            {% if article.type_label %}
                <span class="article-type">{{ article.type_label }}</span>
            {% endif %}

            {% set landscape_images = [] %}
            {% set portrait_images = [] %}
            {% for img in article.images %}
                {% if img.portrait %}
                    {% set portrait_images = portrait_images|merge([img]) %}
                {% else %}
                    {% set landscape_images = landscape_images|merge([img]) %}
                {% endif %}
            {% endfor %}
            {% if landscape_images %}
                {% if landscape_images|length > 1 %}
                    <div class="imgs imgs--swiper" data-image-swiper>
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                {% for img in landscape_images %}
                                    <div class="swiper-slide">
                                        <figure>
                                            <img src="{{ img.url }}" alt="{{ img.alt }}" loading="lazy">
                                            {% set legend = article.show_image_titles and img.title ? img.title : img.caption %}
                                            {% if legend %}
                                                <figcaption>{{ legend }}</figcaption>
                                            {% endif %}
                                        </figure>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="swiper-pagination"></div>
                        </div>
                    </div>
                {% else %}
                    <div class="imgs">
                        {% for img in landscape_images %}
                            <figure>
                                <img src="{{ img.url }}" alt="{{ img.alt }}" loading="lazy">
                                {% set legend = article.show_image_titles and img.title ? img.title : img.caption %}
                                {% if legend %}
                                    <figcaption>{{ legend }}</figcaption>
                                {% endif %}
                            </figure>
                        {% endfor %}
                    </div>
                {% endif %}
            {% endif %}

            <div class="article-content">
                {% if portrait_images or article.date_de_debut or article.date_de_fin or article.datetime
                    or article.lieu|trim or article.adresse|trim
                    or article.documents or article.liens_externes or article.hal_url or article.hal_file
                    or article.reference_bibliographique %}
                <div class="sidebar">
                    <div class="sidebar-container">
                        {% if portrait_images %}
                            {% if portrait_images|length > 1 %}
                                <div class="imgs imgs--swiper imgs--portrait" data-image-swiper>
                                    <div class="swiper">
                                        <div class="swiper-wrapper">
                                            {% for img in portrait_images %}
                                                <div class="swiper-slide">
                                                    <figure class="sidebar-portrait">
                                                        <img src="{{ img.url }}" alt="{{ img.alt }}" loading="lazy">
                                                        {% set legend = article.show_image_titles and img.title ? img.title : img.caption %}
                                                        {% if legend %}
                                                            <figcaption>{{ legend }}</figcaption>
                                                        {% endif %}
                                                    </figure>
                                                </div>
                                            {% endfor %}
                                        </div>
                                        <div class="swiper-pagination"></div>
                                    </div>
                                </div>
                            {% else %}
                                <figure class="sidebar-portrait">
                                    <img src="{{ portrait_images[0].url }}" alt="{{ portrait_images[0].alt }}" loading="lazy">
                                    {% set legend = article.show_image_titles and portrait_images[0].title ? portrait_images[0].title : portrait_images[0].caption %}
                                    {% if legend %}
                                        <figcaption>{{ legend }}</figcaption>
                                    {% endif %}
                                </figure>
                            {% endif %}
                        {% endif %}

                        {% if article.date_de_debut or article.date_de_fin or article.datetime %}
                            <div class="sidebar-section">
                                {% if article.date_de_debut or article.date_de_fin %}
                                    <p>
                                        {% if article.date_debut_ymd and article.date_fin_ymd and article.date_debut_ymd == article.date_fin_ymd %}
                                            {% if article.heure_de_debut and article.heure_de_fin %}
                                                {{ current_language == 'en' ? 'On' : 'Le' }} {{ article.date_de_debut }} {{ current_language == 'en' ? 'from' : 'de' }} {{ article.heure_de_debut }} {{ current_language == 'en' ? 'to' : 'à' }} {{ article.heure_de_fin }}
                                            {% elseif article.heure_de_debut %}
                                                {{ article.date_de_debut }} {{ current_language == 'en' ? 'at' : 'à' }} {{ article.heure_de_debut }}
                                            {% else %}
                                                {{ article.date_de_debut }}
                                            {% endif %}
                                        {% elseif article.date_de_debut and article.date_de_fin %}
                                            {{ current_language == 'en' ? 'From' : 'Du' }} {{ article.date_de_debut }} <br> {{ current_language == 'en' ? 'to' : 'au' }} {{ article.date_de_fin }}
                                        {% elseif article.date_de_debut %}
                                            {% if article.heure_de_debut %}
                                                {{ article.date_de_debut }} {{ current_language == 'en' ? 'at' : 'à' }} {{ article.heure_de_debut }}
                                            {% else %}
                                                {{ article.date_de_debut }}
                                            {% endif %}
                                        {% else %}
                                            {{ current_language == 'en' ? 'Until' : "Jusqu'au" }} {{ article.date_de_fin }}
                                        {% endif %}
                                    </p>
                                {% else %}
                                    <p>
                                        {{ article.datetime }}
                                        {% if article.heure_de_debut %}
                                            {{ current_language == 'en' ? 'at' : 'à' }} {{ article.heure_de_debut }}
                                        {% endif %}
                                    </p>
                                {% endif %}
                            </div>
                        {% endif %}

                        {% if article.lieu|trim or article.adresse|trim %}
                            <div class="sidebar-section">
                                {% if article.lieu|trim %}
                                    <p>{{ article.lieu }}</p>
                                {% endif %}
                                {% if article.adresse|trim %}
                                    {{ article.adresse|raw }}
                                {% endif %}
                            </div>
                        {% endif %}

                        {% if article.documents or article.liens_externes or article.hal_url or article.hal_file %}
                            <div class="sidebar-section">
                                {% for doc in article.documents %}
                                    <a href="{{ doc.url }}" class="link-button{% if ' ' in doc.title %} link-button--wrap-word{% endif %}" target="_blank" rel="noopener"><i class="iconoir-page"></i>{{ doc.title }}</a>
                                {% endfor %}
                                {% for lien in article.liens_externes %}
                                    <a href="{{ lien.url }}" class="link-button{% if ' ' in lien.titre %} link-button--wrap-word{% endif %}" target="_blank" rel="noopener"><i class="iconoir-open-new-window"></i>{{ lien.titre }}</a>
                                {% endfor %}
                                {% if article.hal_url %}
                                    <a href="{{ article.hal_url }}" class="link-button" target="_blank" rel="noopener"><i class="iconoir-open-new-window"></i>{{ current_language == 'en' ? 'On HAL' : 'Sur HAL' }}</a>
                                {% endif %}
                                {% if article.hal_file %}
                                    <a href="{{ article.hal_file }}" class="link-button" target="_blank" rel="noopener"><i class="iconoir-page"></i>{{ current_language == 'en' ? 'HAL Document' : 'Document HAL' }}</a>
                                {% endif %}
                            </div>
                        {% endif %}

                        {% if article.reference_bibliographique %}
                            <div class="sidebar-section reference-bibliographique">{{ article.reference_bibliographique|raw }}</div>
                        {% endif %}
                    </div>
                </div>
            {% endif %}

                <div class="main-content-text">
                    {% if article.membres is not empty or article.autrepersonnes %}
                        <p class="article-field">
                            {% if article.fonction_label %}
                                <span class="inline-title">{{ article.fonction_label }} :</span>
                            {% endif %}
                            {% for m in article.membres %}
                                <a href="{{ m.url }}">{{ m.name }}</a>{% if not loop.last %}, {% endif %}
                            {% endfor %}
                            {% if article.autrepersonnes %}{% if article.membres is not empty %}, {% endif %}{{ article.autrepersonnes }}{% endif %}
                        </p>
                    {% endif %}

                    {% if article.autre_membres is not empty or article.autre_autrepersonnes %}
                        <p class="article-field">
                            {% if article.autre_fonction_label %}
                                <span class="inline-title">{{ article.autre_fonction_label }} :</span>
                            {% endif %}
                            {% for m in article.autre_membres %}
                                <a href="{{ m.url }}">{{ m.name }}</a>{% if not loop.last %}, {% endif %}
                            {% endfor %}
                            {% if article.autre_autrepersonnes %}{% if article.autre_membres is not empty %}, {% endif %}{{ article.autre_autrepersonnes }}{% endif %}
                        </p>
                    {% endif %}

                    {% if article.editeur %}
                        <p class="article-field">
                            <span class="inline-title">{{ current_language == 'en' ? 'Publisher' : 'Éditeur' }} :</span>
                            {{ article.editeur }}
                        </p>
                    {% endif %}

                    {% if article.journal %}
                        <p class="article-field">
                            <span class="inline-title">Journal :</span>
                            {{ article.journal }}
                        </p>
                    {% endif %}

                    {% if article.is_newsletter %}
                        {# Document email complet (table 600px + media queries) rendu
                           isolé pour préserver son <head>/<style> et son responsive.
                           Hauteur auto-ajustée par newsletterFrame.js. #}
                        <iframe class="newsletter-frame" title="{{ post.title }}" srcdoc="{{ article.newsletter_html|e('html_attr') }}"></iframe>
                    {% elseif current_language == 'en' and article.body_en %}
                        {{ article.body_en|raw }}
                    {% else %}
                        {{ post.content }}
                    {% endif %}

                    {% if article.canal_u %}
                        <div class="canal-u-embeds">
                            {% for embed_url in article.canal_u %}
                                <div class="canal-u-embed">
                                    <iframe src="{{ embed_url }}" allowfullscreen></iframe>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}

                    {% if article.youtube %}
                        <div class="youtube-embeds">
                            {% for embed_url in article.youtube %}
                                <div class="video-embed">
                                    <iframe src="{{ embed_url }}"
                                        title="YouTube video player"
                                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                        referrerpolicy="strict-origin-when-cross-origin"
                                        allowfullscreen></iframe>
                                </div>
                            {% endfor %}
                        </div>
                    {% endif %}

                    {% if article.axes %}
                        <p class="article-field mots-cles">
                            <span class="inline-title">{{ current_language == 'en' ? 'Thematic axes' : 'Axes thématiques' }} :</span>
                            {% for kw in article.axes %}
                                <a href="{{ kw.url }}" class="keyword-link">{{ kw.name }}</a>{% if not loop.last %}, {% endif %}
                            {% endfor %}
                        </p>
                    {% endif %}

                    {% if article.programmes %}
                        <p class="article-field mots-cles">
                            <span class="inline-title">{{ current_language == 'en' ? 'Research programmes' : 'Programmes de recherche' }} :</span>
                            {% for kw in article.programmes %}
                                <a href="{{ kw.url }}" class="keyword-link">{{ kw.name }}</a>{% if not loop.last %}, {% endif %}
                            {% endfor %}
                        </p>
                    {% endif %}

                    {% if article.etiquettes %}
                        <p class="article-field mots-cles">
                            <span class="inline-title">{{ current_language == 'en' ? 'Keywords' : 'Mots-clés' }} :</span>
                            {% for kw in article.etiquettes %}
                                <a href="{{ kw.url }}" class="keyword-link">{{ kw.name }}</a>{% if not loop.last %}, {% endif %}
                            {% endfor %}
                        </p>
                    {% endif %}

                {% if article.annonces_liees is not empty %}
                    <section class="related-posts">
                        <h3>{{ current_language == 'en' ? 'Related posts' : 'Annonces liées' }}</h3>
                        <div class="post-grid">
                            {% for related in article.annonces_liees %}
                                {% include 'partials/post-card.twig' with { post: related, card: related_cards[related.ID], show_category: true } %}
                            {% endfor %}
                        </div>
                    </section>
                {% endif %}

                {% if article.seances_a_venir is not empty %}
                    <section class="seances-section">
                        <h3>{{ current_language == 'en' ? 'Upcoming sessions' : 'Séances à venir' }}</h3>
                        <div class="seances-list">
                            {% for s in article.seances_a_venir %}
                                <div class="seance-item" id="seance-{{ s.post.ID }}">
                                    <div class="seance-header" data-seance-toggle>
                                        <div class="seance-date">
                                            <span class="seance-date__day">{{ s.day }}</span>
                                            <span class="seance-date__month">{{ s.month }}</span>
                                            {% if s.year %}<span class="seance-date__year">{{ s.year }}</span>{% endif %}
                                        </div>
                                        <div class="seance-info">
                                            <h4 class="seance-title">{{ s.post.title | bilingual(current_language) }}</h4>
                                            {% if s.intervenants is not empty or s.autrepersonnes %}
                                                <span class="seance-intervenants">
                                                    {% for i in s.intervenants %}
                                                        <a href="{{ i.url }}">{{ i.name }}</a>{% if not loop.last %}, {% endif %}
                                                    {% endfor %}
                                                    {% if s.autrepersonnes %}{% if s.intervenants is not empty %}, {% endif %}{{ s.autrepersonnes }}{% endif %}
                                                </span>
                                            {% endif %}
                                        </div>
                                        <i class="iconoir-nav-arrow-down seance-chevron"></i>
                                    </div>
                                    <div class="seance-content" style="display: none;">
                                        <div class="seance-content-infos">
                                            <div class="seance-content-date">
                                                {% if s.date_full %}
                                                    <p>
                                                        {{ s.date_full }}
                                                        {% if s.heure_de_debut and s.heure_de_fin %}
                                                            {{ current_language == 'en' ? 'from' : 'de' }} {{ s.heure_de_debut }} {{ current_language == 'en' ? 'to' : 'à' }} {{ s.heure_de_fin }}
                                                        {% elseif s.heure_de_debut %}
                                                            {{ current_language == 'en' ? 'at' : 'à' }} {{ s.heure_de_debut }}
                                                        {% endif %}
                                                        {% if s.date_fin %} — {{ s.date_fin }}{% endif %}
                                                    </p>
                                                {% endif %}
                                            </div>
                                            <div class="seance-content-lieu">
                                                {% if s.lieu %}<p>{{ s.lieu }}</p>{% endif %}
                                                {% if s.adresse %}<p>{{ s.adresse|raw }}</p>{% endif %}
                                            </div>
                                        </div>
                                        {% if current_language == 'en' and s.body_en %}
                                            {{ s.body_en|raw }}
                                        {% else %}
                                            {{ s.post.content }}
                                        {% endif %}

                                        {% if s.images is not empty %}
                                            <div class="seance-images imgs">
                                                {% for img in s.images %}
                                                    <figure>
                                                        <img src="{{ img.url }}" alt="{{ img.alt }}" loading="lazy">
                                                        {% set legend = s.show_image_titles and img.title ? img.title : img.caption %}
                                                        {% if legend %}
                                                            <figcaption>{{ legend }}</figcaption>
                                                        {% endif %}
                                                    </figure>
                                                {% endfor %}
                                            </div>
                                        {% endif %}

                                        {% if s.documents is not empty or s.liens_externes is not empty %}
                                            <div class="seance-extras sidebar-section">
                                                {% for doc in s.documents %}
                                                    <a href="{{ doc.url }}" class="link-button{% if ' ' in doc.title %} link-button--wrap-word{% endif %}" target="_blank" rel="noopener"><i class="iconoir-page"></i>{{ doc.title }}</a>
                                                {% endfor %}
                                                {% for lien in s.liens_externes %}
                                                    <a href="{{ lien.url }}" class="link-button{% if ' ' in lien.titre %} link-button--wrap-word{% endif %}" target="_blank" rel="noopener"><i class="iconoir-open-new-window"></i>{{ lien.titre }}</a>
                                                {% endfor %}
                                            </div>
                                        {% endif %}

                                        {% if s.annonces_liees is not empty %}
                                            <div class="seance-related">
                                                <h4>{{ current_language == 'en' ? 'Related posts' : 'Annonces liées' }}</h4>
                                                <div class="post-grid">
                                                    {% for related in s.annonces_liees %}
                                                        {% include 'partials/post-card.twig' with { post: related, card: related_cards[related.ID] is defined ? related_cards[related.ID] : {}, show_category: true } %}
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </section>
                {% endif %}

                {% if article.seances_passees is not empty %}
                    <section class="seances-section">
                        <h3>{{ current_language == 'en' ? 'Past sessions' : 'Séances passées' }}</h3>
                        <div class="seances-list">
                            {% for s in article.seances_passees %}
                                <div class="seance-item" id="seance-{{ s.post.ID }}">
                                    <div class="seance-header" data-seance-toggle>
                                        <div class="seance-date">
                                            <span class="seance-date__day">{{ s.day }}</span>
                                            <span class="seance-date__month">{{ s.month }}</span>
                                            {% if s.year %}<span class="seance-date__year">{{ s.year }}</span>{% endif %}
                                        </div>
                                        <div class="seance-info">
                                            <h4 class="seance-title">{{ s.post.title | bilingual(current_language) }}</h4>
                                            {% if s.intervenants is not empty or s.autrepersonnes %}
                                                <span class="seance-intervenants">
                                                    {% for i in s.intervenants %}
                                                        <a href="{{ i.url }}">{{ i.name }}</a>{% if not loop.last %}, {% endif %}{% endfor %}{% if s.autrepersonnes %}{% if s.intervenants is not empty %}, {% endif %}{{ s.autrepersonnes }}{% endif %}
                                                </span>
                                            {% endif %}
                                        </div>
                                        <i class="iconoir-nav-arrow-down seance-chevron"></i>
                                    </div>
                                    <div class="seance-content" style="display: none;">
                                        <div class="seance-content-infos">
                                            <div class="seance-content-date">
                                                {% if s.date_full %}
                                                    <p>
                                                        {{ s.date_full }}
                                                        {% if s.heure_de_debut and s.heure_de_fin %}
                                                            {{ current_language == 'en' ? 'from' : 'de' }} {{ s.heure_de_debut }} {{ current_language == 'en' ? 'to' : 'à' }} {{ s.heure_de_fin }}
                                                        {% elseif s.heure_de_debut %}
                                                            {{ current_language == 'en' ? 'at' : 'à' }} {{ s.heure_de_debut }}
                                                        {% endif %}
                                                        {% if s.date_fin %} — {{ s.date_fin }}{% endif %}
                                                    </p>
                                                {% endif %}
                                            </div>
                                            <div class="seance-content-lieu">
                                                {% if s.lieu %}<p>{{ s.lieu }}</p>{% endif %}
                                                {% if s.adresse %}<p>{{ s.adresse|raw }}</p>{% endif %}
                                            </div>
                                        </div>
                                        {% if current_language == 'en' and s.body_en %}
                                            {{ s.body_en|raw }}
                                        {% else %}
                                            {{ s.post.content }}
                                        {% endif %}

                                        {% if s.images is not empty %}
                                            <div class="seance-images imgs">
                                                {% for img in s.images %}
                                                    <figure>
                                                        <img src="{{ img.url }}" alt="{{ img.alt }}" loading="lazy">
                                                        {% set legend = s.show_image_titles and img.title ? img.title : img.caption %}
                                                        {% if legend %}
                                                            <figcaption>{{ legend }}</figcaption>
                                                        {% endif %}
                                                    </figure>
                                                {% endfor %}
                                            </div>
                                        {% endif %}

                                        {% if s.documents is not empty or s.liens_externes is not empty %}
                                            <div class="seance-extras sidebar-section">
                                                {% for doc in s.documents %}
                                                    <a href="{{ doc.url }}" class="link-button{% if ' ' in doc.title %} link-button--wrap-word{% endif %}" target="_blank" rel="noopener"><i class="iconoir-page"></i>{{ doc.title }}</a>
                                                {% endfor %}
                                                {% for lien in s.liens_externes %}
                                                    <a href="{{ lien.url }}" class="link-button{% if ' ' in lien.titre %} link-button--wrap-word{% endif %}" target="_blank" rel="noopener"><i class="iconoir-open-new-window"></i>{{ lien.titre }}</a>
                                                {% endfor %}
                                            </div>
                                        {% endif %}

                                        {% if s.annonces_liees is not empty %}
                                            <div class="seance-related">
                                                <h4>{{ current_language == 'en' ? 'Related posts' : 'Annonces liées' }}</h4>
                                                <div class="post-grid">
                                                    {% for related in s.annonces_liees %}
                                                        {% include 'partials/post-card.twig' with { post: related, card: related_cards[related.ID] is defined ? related_cards[related.ID] : {}, show_category: true } %}
                                                    {% endfor %}
                                                </div>
                                            </div>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </section>
                {% endif %}

                <p class="maj">{{ current_language == 'en' ? 'Updated on' : 'Mis à jour le' }} {{ post.modified_date('d/m/Y') ?: post.date('d/m/Y') }}</p>
                </div>
            </div>

        </div>
    </div>
{% endblock %}