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

{% block title %}Evenements{% endblock %}

{% block body %}
    <h1 class="text-3xl font-black uppercase tracking-tighter italic heading-page mb-8">Evenements</h1>

    <div class="admin-card mb-8">
        <form method="get" action="{{ path('app_admin_events') }}" class="flex flex-wrap gap-3 items-end">
            <div class="flex-1 min-w-[200px]">
                <label for="admin_event_search" class="admin-form-label font-black uppercase text-gray-400 mb-1 block">Rechercher</label>
                <input type="text" id="admin_event_search" name="q" value="{{ searchQuery }}" class="admin-form-input" placeholder="Titre, ville, organisateur...">
            </div>
            <div class="flex gap-2">
                <button type="submit" class="admin-btn-search font-black uppercase text-xs tracking-widest">Rechercher</button>
                {% if searchQuery %}
                    <a href="{{ path('app_admin_events') }}" class="admin-btn-clear font-black uppercase text-xs tracking-widest hover:bg-gray-100 transition-all">Effacer</a>
                {% endif %}
            </div>
        </form>
    </div>

    <div class="admin-card overflow-hidden p-0">
        {% if events|length > 0 %}
        <div class="overflow-x-auto">
        <table class="admin-table">
            <thead>
                <tr>
                    <th class="text-[10px] font-black uppercase tracking-widest text-gray-300">Evenement</th>
                    <th class="text-[10px] font-black uppercase tracking-widest text-gray-300">Organisateur</th>
                    <th class="text-[10px] font-black uppercase tracking-widest text-gray-300">Date</th>
                    <th class="text-[10px] font-black uppercase tracking-widest text-gray-300">Lieu</th>
                    <th class="text-[10px] font-black uppercase tracking-widest text-gray-300 text-center">Statut</th>
                    <th class="text-[10px] font-black uppercase tracking-widest text-gray-300 text-center">Secret</th>
                    <th class="text-[10px] font-black uppercase tracking-widest text-gray-300 text-right">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for event in events %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td>
                        <p class="font-black text-sm">{{ event.title }}</p>
                    </td>
                    <td>
                        <p class="text-sm font-bold">{{ event.account.companyName ?? (event.account.firstName ~ ' ' ~ event.account.lastName) }}</p>
                        <p class="text-xs text-gray-400">{{ event.account.email }}</p>
                    </td>
                    <td>
                        <p class="text-sm font-bold">{{ event.startAt|date('d/m/Y') }}</p>
                        <p class="text-xs text-gray-400">{{ event.startAt|date('H:i') }} - {{ event.endAt|date('H:i') }}</p>
                    </td>
                    <td>
                        <p class="text-sm font-bold">{{ event.city }}</p>
                        <p class="text-xs text-gray-400">{{ event.zipcode }}</p>
                    </td>
                    <td class="text-center">
                        {% if event.online %}
                            <span class="admin-badge-green text-xs font-black uppercase">En ligne</span>
                        {% else %}
                            <span class="admin-badge-red text-xs font-black uppercase">Hors ligne</span>
                        {% endif %}
                    </td>
                    <td class="text-center">
                        {% if event.secret %}
                            <span class="admin-badge-yellow text-xs font-black uppercase">Secret</span>
                        {% else %}
                            <span class="text-xs text-gray-300">—</span>
                        {% endif %}
                    </td>
                    <td class="text-right">
                        <div class="flex gap-2 justify-end">
                            <form method="post" action="{{ path('app_admin_toggle_event_online', {id: event.id}) }}">
                                {% if event.online %}
                                    <button type="submit" class="admin-btn-sm-yellow text-xs font-black uppercase tracking-widest">Hors ligne</button>
                                {% else %}
                                    <button type="submit" class="admin-btn-sm-white text-xs font-black uppercase tracking-widest">En ligne</button>
                                {% endif %}
                            </form>
                            <a href="{{ path('app_account_edit_event', {id: event.id}) }}" class="admin-btn-sm-white text-xs font-black uppercase tracking-widest">Modifier</a>
                            <form method="post" action="{{ path('app_admin_delete_event', {id: event.id}) }}" data-confirm="Supprimer l'evenement &laquo; {{ event.title }} &raquo; ? Cette action est irreversible.">
                                <button type="submit" class="admin-btn-sm-danger text-xs font-black uppercase tracking-widest">Supprimer</button>
                            </form>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        </div>
        {% else %}
        <div class="p-12 text-center">
            <p class="text-gray-400 font-bold text-sm">
                {% if searchQuery %}
                    Aucun evenement trouve pour "{{ searchQuery }}".
                {% else %}
                    Aucun evenement pour le moment.
                {% endif %}
            </p>
        </div>
        {% endif %}
    </div>

    {% if events.getTotalItemCount > 10 %}
    <div class="mt-6">
        {{ knp_pagination_render(events) }}
    </div>
    {% endif %}
{% endblock %}
