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

{% block title %}{{ actualite.titre }} | Terres de l'Yonne{% endblock %}

{% block body %}
    <div class="fil-ariane">
        <div class="container">
            <span><b>Vous êtes ici</b> : <a href="{{ path('index') }}">Accueil</a> | <a href="{{ path('actuality.index') }}">Nos actualités</a> | {{ actualite.titre }}</span>
        </div>
    </div>

    <div class="actualite-detail p60">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="actualite-carousel owl-carousel">
                        {% for photo in actualite.photos %}
                            <div class="item">
                                <img src="{{ vich_uploader_asset(photo, 'imageFile') }}" class="img-border" alt="{{ actualite.titre }}">
                            </div> 
                        {% endfor %}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="title">
                        {% for centre in actualite.centres|slice(0, 1) %}
                            {% if centre.nom == "CFA Agricole de l'Yonne" %}
                                <img src="{{ asset('images/forme-titre/orange.svg') }}" alt="Forme orange" class="forme">
                            {% elseif centre.nom == "CFPPA 89" %}
                                <img src="{{ asset('images/forme-titre/rouge.svg') }}" alt="Forme rouge" class="forme">
                            {% elseif centre.nom == "Lycée Agricole La Brosse" %}
                                <img src="{{ asset('images/forme-titre/vert.svg') }}" alt="Forme vert" class="forme">
                            {% elseif centre.nom == "Lycée Professionnel de Champs-sur-Yonne" %}
                                <img src="{{ asset('images/forme-titre/rose.svg') }}" alt="Forme rose" class="forme">
                            {% endif %}
                        {% endfor %}
                        <h1>{{ actualite.titre }}</h1>
                    </div>
                    <span>
                        <span class="date">{{ actualite.createdAt|date('d/m/Y') }}</span> - <span class="categorie">Catégorie</span> : {% for centre in actualite.centres %}{% if loop.index is even and actualite.centres|length >= 2 %}| {% endif %}{{ centre.nom }}{% if loop.index is even and actualite.centres|length > 2 %} |{% endif %}{% endfor %} | {% for categorie in actualite.categories %}{% if loop.index is even and actualite.categories|length >= 2 %}| {% endif %}{{ categorie.nom }}{% if loop.index is even and actualite.categories|length > 2 %} |{% endif %}{% endfor %}
                    </span>

                    <p>
                        {{ actualite.contenu|raw }}
                    </p>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script>
        $('.actualite-carousel').owlCarousel({
            loop:true,
            margin:0,
            dots: true,
            autoplay: true,
            autoplayTimeout: 5000,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:1
                },
                1000:{
                    items:1
                }
            }
        })
    </script>
{% endblock %}