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

{% block title %}{{ actu.title|default(actu.titre) }}{% endblock %}

{% block body_class %}page-news{% endblock %}

{% block head_meta %}
    {{ parent() }}
    <meta name="turbo-visit-control" content="reload">
    <meta name="turbo-cache-control" content="no-cache">
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('styles/pages/news.css') }}" rel="stylesheet">
{% endblock %}

{% block body %}
    {% include 'layout/_header.html.twig' %}
    <main>
        <section class="section-visuel">
            <div class="container">
                <div class="row">
                    <div class="col-12 pt-4 pb-5">
                        <div class="c_visuel">
                            {% if actu.image %}
                                <img src="{{ asset('/uploads/actus/' ~ actu.image) }}" alt="{{ actu.titre }}">
                            {% else %}
                                <img src="{{ asset('/uploads/a40edc02638b852c619d10e60f086635a01b7ffb.jpg') }}" alt="{{ actu.titre }}">
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="section-content">
            <div class="container pe-5">
                <div class="row">
                    <div class="col-12 col-lg-8 pb-5 pe-lg-5">
                        <div class="content-texte">
                            <h1>{{ actu.titre }}</h1>
                            {{ actu.contenu|raw }}
                        </div>
                        <div class="d-flex flex-start gap-3 border-bottom border-top py-4 c_share">
                            <p>partager l'article</p>
                            {% set articleUrl = absolute_url(path('app_news_article', { slug: actu.slug })) %}
                            {% set shareTitle = actu.titre|url_encode %}
                            {% set shareUrl = articleUrl|url_encode %}
                            <ul class="share">
                                <li>
                                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ shareUrl }}" target="_blank" rel="noopener" title="Partager l'article sur Facebook" class="btn btn-picto-40 br-6 bg-orange"><svg width="8" height="15" viewBox="0 0 8 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.25 8.625H7.125L7.875 5.625H5.25V4.125C5.25 3.3525 5.25 2.625 6.75 2.625H7.875V0.105C7.6305 0.0727501 6.70725 0 5.73225 0C3.696 0 2.25 1.24275 2.25 3.525V5.625H0V8.625H2.25V15H5.25V8.625Z" fill="white"/></svg></a>
                                </li>
                                <li>
                                    <a href="https://twitter.com/intent/tweet?url={{ shareUrl }}&text={{ shareTitle }}" target="_blank" rel="noopener" title="Partager l'article sur X" class="btn btn-picto-40 br-6 bg-orange"><svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.6813 0L7.93425 4.28325L4.69425 0H0L5.60775 7.332L0.29325 13.4062H2.56875L6.6705 8.71875L10.2555 13.4062H14.832L8.9865 5.67825L13.9552 0H11.6813ZM10.8832 12.045L2.6565 1.28925H4.00875L12.1432 12.0442L10.8832 12.045Z" fill="white"/></svg></a>
                                </li>
                                <li>
                                    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ shareUrl }}" target="_blank" rel="noopener" title="Partager l'article sur Linkedin" class="btn btn-picto-40 br-6 bg-orange"><svg width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 1.50075C2.9998 1.89857 2.84158 2.28003 2.56013 2.56119C2.27868 2.84235 1.89707 3.0002 1.49925 3C1.10143 2.9998 0.719974 2.84158 0.43881 2.56013C0.157646 2.27868 -0.000198725 1.89707 1.87771e-07 1.49925C0.0001991 1.10143 0.158425 0.719974 0.43987 0.43881C0.721316 0.157646 1.10293 -0.000198725 1.50075 1.87771e-07C1.89857 0.0001991 2.28003 0.158425 2.56119 0.43987C2.84235 0.721316 3.0002 1.10293 3 1.50075ZM3.045 4.11075H0.0450001V13.5007H3.045V4.11075ZM7.785 4.11075H4.8V13.5007H7.755V8.57325C7.755 5.82825 11.3325 5.57325 11.3325 8.57325V13.5007H14.295V7.55325C14.295 2.92575 9 3.09825 7.755 5.37075L7.785 4.11075Z" fill="white"/></svg></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-12 col-lg-4">
                        <div class="bloc-autres-articles bg-grey03 br-6 p-4 d-flex flex-column gap-3">
                            <h2>Articles récents</h2>
                            <ul class="liste-articles">
                                {% for recentActu in recentActus %}
                                    <li>
                                        <a href="{{ path('app_news_article', { slug: recentActu.slug }) }}" title="{{ recentActu.titre }}" class="card cardAutreActu">
                                            <div class="c_visuel">
                                                {% if recentActu.image %}
                                                    <img src="{{ asset('/uploads/actus/' ~ recentActu.image) }}" alt="{{ recentActu.titre }}">
                                                {% else %}
                                                    <img src="{{ asset('/uploads/a40edc02638b852c619d10e60f086635a01b7ffb.jpg') }}" alt="{{ recentActu.titre }}">
                                                {% endif %}
                                            </div>
                                            <div class="c_infos">
                                                <h3>{{ recentActu.titre }}</h3>
                                                {% if recentActu.datePublication %}
                                                    <span class="date">{{ recentActu.datePublication|date('d.m.Y') }}</span>
                                                {% endif %}
                                            </div>
                                        </a>
                                    </li>
                                {% endfor %}
                            </ul>
                            <a href="{{ path('app_news') }}" title="Voir tous les articles" class="btn btn-classic bg-orange padding-1 gap-2 br-6">
                                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.33325 8.00004H12.6666M7.99992 12.6667L12.6666 8.00004L7.99992 3.33337" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <span>Voir tout</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    {% include 'layout/_footer.html.twig' %}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
{% endblock %}