{% 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 %}
            <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 %}
            <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 %}

        <div class="max-w-4xl mx-auto">
            <div class="bg-white rounded-lg shadow-lg p-6 inline-block text-center my-10">
                <form method="get" class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 text-black">
                    <input class="border border-gray-300 rounded py-2 px-4 w-full md:w-auto" placeholder="Rechercher par entreprise" type="text" name="company_name" value="{{ app.request.query.get('company_name') }}"/>
                    <input class="border border-gray-300 rounded py-2 px-4 w-full md:w-auto" placeholder="Rechercher par lieu" type="text" name="location" value="{{ app.request.query.get('location') }}"/>
                    <input class="border border-gray-300 rounded py-2 px-4 w-full md:w-auto" placeholder="Autre recherche" type="text" name="category" value="{{ app.request.query.get('category') }}"/>
                    <button type="submit" class="bg-teal-500 hover:bg-teal-600 text-white py-2 px-6 rounded">Rechercher</button>
                </form>
            </div>

            {% for announcement in announcements %}
                <div class="bg-white p-6 rounded-lg shadow mb-4 relative">
                    <div class="absolute top-4 right-4 flex items-center space-x-2">
                        {% 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 %}

                        <form method="post" action="{{ path('app_favorite_toggle', {id: announcement.id}) }}">
                            <button type="submit" class="text-xl">
                                {% if announcement.id in favorites %}
                                    ⭐
                                {% else %}
                                    ☆
                                {% endif %}
                            </button>
                        </form>
                    </div>

                    <h2 class="text-3xl font-semibold mb-2">{{ announcement.title }}</h2>
                    <p class="text-gray-600 mb-2">{{ announcement.company.name }}</p>

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

                    <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 %}
