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

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

{% block titre %}
    {{ actualite.titre }} - {{ parent() }}
{% endblock %}

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

{% block body %}
    <div class="container py-5">
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ path('accueil') }}">Accueil</a></li>
                <li class="breadcrumb-item"><a href="{{ path('listeActualites') }}">Actualités</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ actualite.titre }}</li>
            </ol>
        </nav>
        
        <div class="card shadow">
            <div class="card-header bg-transparent d-flex justify-content-between align-items-center">
                <h1 class="h2 mb-0">{{ actualite.titre }}</h1>
                <span class="text-muted"><i class="bi bi-calendar-event me-2"></i>{{ actualite.dateCreation|date('d/m/Y') }}</span>
            </div>
            
            {% if actualite.image %}
                <img src="{{ asset(''uploads/images/actualites/' ~ actualite.image) }}" class="img-fluid" alt="{{ actualite.titre }}">
            {% endif %}
            
            <div class="card-body">
                <div class="actualite-content">
                    {{ actualite.contenu|raw }}
                </div>
            </div>
            
            <div class="card-footer bg-transparent text-center">
                <a href="{{ path('listeActualites') }}" class="btn btn-outline-primary rounded-pill">
                    <i class="bi bi-arrow-left me-2"></i>Retour aux actualités
                </a>
            </div>
        </div>
    </div>
{% endblock %}

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