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

{% block title %}Commentaires - {{ etablissement.nom }}{% endblock %}

{% block body %}
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
    .card { border: 1px solid #ddd; border-radius: 5px; padding: 15px; margin-bottom: 10px; }
</style>

<div class="example-wrapper">
    <h1>{{ etablissement.nom }} {{ etablissement.nature }}</h1>

    <h3>Informations</h3>
    <ul>
        <li aria-label="Adresse">📍 Adresse : {{ etablissement.adresse }}, {{ etablissement.commune }} ({{ etablissement.departement }})</li>
        <li aria-label="Secteur">🔹 Secteur : {{ etablissement.secteur.value }}</li>
        <li aria-label="Académie">🎓 Académie : {{ etablissement.academie }}</li>
        <li aria-label="Coordonnées géographiques">🌐 Latitude : {{ etablissement.latitude }} - Longitude : {{ etablissement.longitude }}</li>
    </ul>

    <h3>Commentaires</h3>
    {% for commentaire in commentaires %}
        <div class="card">
            <strong>{{ commentaire.nomUtilisateur }}</strong> - 
            <em>{{ commentaire.dateCreation|date('d/m/Y H:i') }}</em>
            <p>Note : ⭐ {{ commentaire.note }}/5</p>
            <p>{{ commentaire.contenu }}</p>

            <!-- Boutons Modifier et Supprimer -->
            <a href="{{ path('commentaire_edit', {'etablissement_id': etablissement.id, 'id': commentaire.id}) }}" class="btn btn-warning btn-sm">Modifier</a>

            <a href="{{ path('commentaire_remove', {'etablissement_id': etablissement.id, 'id': commentaire.id}) }}" class="btn btn-danger btn-sm">
                Supprimer
            </a>
        </div>
    {% else %}
        <p>Aucun commentaire pour cet établissement.</p>
    {% endfor %}
    <div>
        <a href="{{ path('commentaire_new', {'id': etablissement.id}) }}" class="btn btn-primary mt-3">Laisser un commentaire</a>
    <div>
        <a href="{{ path('app_etablissements') }}" class="btn btn-secondary mt-3">Retour à la liste des établissements</a>
    </div>
</div>
{% endblock %}