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

{% block title %}Détails de l'Annonce{% endblock %}

{% block body %}
    <div class="container mx-auto p-6">
        <h1 class="text-3xl font-bold mb-6">Détails de l'Annonce</h1>

        <!-- Détails de l'annonce -->
        <div class="bg-white p-6 rounded-lg shadow mb-4">
            <!-- 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>

            <!-- Description du stage -->
            <div class="mb-4">
                <strong>Description du stage : </strong>
                <p>{{ announcement.description }}</p>
            </div>

            <!-- Statut de l'annonce -->
            <div class="mb-4">
                <strong>Statut : </strong>
                <span class="text-sm {% if announcement.status == 'notVerified' %}text-red-500{% else %}text-green-500{% endif %}">
                    {% if announcement.status == 'notVerified' %}
                        Non validée
                    {% else %}
                        Validée
                    {% endif %}
                </span>
            </div>

            <!-- Date de création -->
            <div class="mb-4">
                <strong>Date de création : </strong>
                <span>{{ announcement.creationDate | date('d/m/Y') }}</span>
            </div>

            {% if 'ROLE_INTERN' in app.user.roles %}
                <form method="post" action="{{ path('app_intern_send_application') }}">
                    <input type="hidden" name="announcement_id" value="{{ announcement.id }}">
                    <button type="submit" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded">
                        <i class="fas fa-paper-plane"></i> Candidater à cette offre
                    </button>
                </form>
            {% endif %}

            {% if 'ROLE_ADMIN' in app.user.roles %}

            <!-- Boutons Modifier et Valider -->
            <div class="mt-4 flex space-x-4">
                <a href="{{ path('app_announcement_edit', { id: announcement.id }) }}"
                   class="bg-teal-500 text-white px-4 py-2 rounded hover:bg-teal-600">
                    Modifier l'annonce
                </a>

                {% if announcement.status == 'notVerified' %}
                    <form method="post" action="{{ path('app_announcement_validate', { id: announcement.id }) }}">
                        <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
                            Valider l'annonce
                        </button>
                    </form>
                {% endif %}
            </div>

            {% endif %}
            <!-- Vérifier si c'est un favori -->
            <form method="post" action="{{ path(isFavorite ? 'app_favorite_remove' : 'app_favorite_add', {id: announcement.id}) }}">
                <button type="submit" class="text-yellow-500">
                    {% if isFavorite %}
                        ⭐ Retirer des favoris
                    {% else %}
                        ☆ Ajouter aux favoris
                    {% endif %}
                </button>
            </form>
        </div>

        <!-- Bouton de retour à la liste -->
        <a href="{{ path('app_announcement_index') }}" class="text-teal-500 flex items-center mb-4">
            <i class="fas fa-arrow-left mr-2"></i>Retour à la liste des annonces
        </a>
    </div>
{% endblock %}
