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

{% block title %}Liste des Annonces{% endblock %}

{% block body %}
    <div class="container mx-auto p-6">
        <h1 class="text-3xl font-bold mb-6 text-center">Liste des Annonces</h1>

        {% if 'ROLE_ADMIN' in app.user.roles %}
        <!-- Formulaire pour afficher uniquement les annonces non validées -->
        <form method="get" class="mb-6 text-center">
            <label class="flex items-center justify-center space-x-2">
                <input
                        type="checkbox"
                        name="show_non_validated"
                        value="1"
                        {% if showNonValidated %}checked{% endif %}
                        class="rounded text-teal-500"
                >
                <span class="text-gray-700">Afficher uniquement les annonces non validées</span>
            </label>
            <button type="submit" class="ml-4 bg-teal-500 text-white px-4 py-2 rounded mt-2">
                Appliquer
            </button>
        </form>
        {% endif %}

        {% if 'ROLE_EMPLOYEE' in app.user.roles %}
        <!-- Bouton pour créer une annonce -->
        <div class="text-center mb-6">
            <a href="{{ path('app_announcement_new') }}" class="bg-teal-500 text-white px-6 py-3 rounded-md hover:bg-teal-600">
                Créer une annonce
            </a>
        </div>
        {% endif %}

        <!-- Liste des annonces -->
        <div class="max-w-4xl mx-auto">
            {% for announcement in announcements %}
                <div class="bg-white p-6 rounded-lg shadow mb-4 relative">
                    <!-- Statut en haut à droite -->
                    <div class="absolute top-4 right-4">
                        {% if announcement.status == 'notVerified' %}
                            <span class="text-red-500 font-semibold">Non validée</span>
                        {% else %}
                            <span class="text-green-500 font-semibold">Validée</span>
                        {% endif %}
                    </div>

                    <!-- Titre de l'annonce -->
                    <h2 class="text-3xl font-semibold mb-2">{{ announcement.title }}</h2>

                    <!-- Nom de l'entreprise -->
                    <p class="text-gray-600 mb-2">{{ announcement.company.name }}</p>

                    <div class="text-gray-500 text-sm mb-4">
                        <!-- Date du stage -->
                        <div class="mb-2">
                            <i class="fas fa-calendar-alt mr-1"></i>
                            <span>Date du stage : {{ announcement.date }}</span>
                        </div>

                        <!-- Adresse de l'entreprise -->
                        <div>
                            <i class="fas fa-map-marker-alt mr-1"></i>
                            <span>{{ announcement.company.address }}</span>
                        </div>
                    </div>

                    <!-- Lien vers la page de détails -->
                    <a href="{{ path('app_announcement_show', { id: announcement.id }) }}"
                       class="bg-teal-500 text-white px-4 py-2 rounded">
                        Détails
                    </a>
                </div>
            {% else %}
                <p class="text-center text-gray-500">Aucune annonce disponible.</p>
            {% endfor %}
        </div>
    </div>
{% endblock %}