{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ user.email }} - Détails Utilisateur{% endblock %}

{% block content %}
{# Header with user info #}
<div class="mb-8">
    <div class="sm:flex sm:items-center sm:justify-between">
        <div class="flex items-center">
            <div class="flex-shrink-0 h-16 w-16">
                <div class="h-16 w-16 rounded-full bg-blue-100 flex items-center justify-center">
                    <span class="text-blue-600 font-bold text-2xl">
                        {{ user.firstName ? user.firstName|slice(0, 1)|upper : user.email|slice(0, 1)|upper }}{{ user.lastName ? user.lastName|slice(0, 1)|upper : '' }}
                    </span>
                </div>
            </div>
            <div class="ml-4">
                <h1 class="text-3xl font-bold text-gray-900">
                    {{ user.firstName }} {{ user.lastName }}
                </h1>
                <p class="mt-1 text-sm text-gray-500">{{ user.email }}</p>
                <div class="mt-2 flex items-center space-x-2">
                    <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full {{ user.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                        {{ user.isActive ? 'Actif' : 'Inactif' }}
                    </span>
                    {% if user.emailVerified %}
                        <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                            <i class="fas fa-check mr-1"></i> Email vérifié
                        </span>
                    {% endif %}
                    {% if user.is2faEnabled %}
                        <span class="px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                            <i class="fas fa-shield-alt mr-1"></i> 2FA
                        </span>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="mt-4 sm:mt-0 flex space-x-3">
            <a href="{{ path('admin_users_edit', {id: user.id}) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <i class="fas fa-edit mr-2"></i>
                Modifier
            </a>
            <a href="{{ path('admin_users_reset_password', {id: user.id}) }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <i class="fas fa-key mr-2"></i>
                Réinitialiser MdP
            </a>
            <a href="{{ path('admin_users_index') }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour
            </a>
        </div>
    </div>
</div>

{# Tabs Navigation #}
<div class="border-b border-gray-200 mb-6">
    <nav class="-mb-px flex space-x-8" aria-label="Tabs">
        <a href="{{ path('admin_users_show', {id: user.id, tab: 'profile'}) }}"
           class="whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm {{ current_tab == 'profile' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
            <i class="fas fa-user mr-2"></i>
            Profil
        </a>
        <a href="{{ path('admin_users_show', {id: user.id, tab: 'security'}) }}"
           class="whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm {{ current_tab == 'security' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
            <i class="fas fa-shield-alt mr-2"></i>
            Sécurité
        </a>
        <a href="{{ path('admin_users_show', {id: user.id, tab: 'activities'}) }}"
           class="whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm {{ current_tab == 'activities' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
            <i class="fas fa-history mr-2"></i>
            Activités
        </a>
        <a href="{{ path('admin_users_show', {id: user.id, tab: 'devices'}) }}"
           class="whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm {{ current_tab == 'devices' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
            <i class="fas fa-mobile-alt mr-2"></i>
            Appareils
        </a>
        <a href="{{ path('admin_users_show', {id: user.id, tab: 'http_logs'}) }}"
           class="whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm {{ current_tab == 'http_logs' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
            <i class="fas fa-globe mr-2"></i>
            Requêtes HTTP
        </a>
        <a href="{{ path('admin_users_show', {id: user.id, tab: 'login_attempts'}) }}"
           class="whitespace-nowrap pb-4 px-1 border-b-2 font-medium text-sm {{ current_tab == 'login_attempts' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}">
            <i class="fas fa-sign-in-alt mr-2"></i>
            Connexions
        </a>
    </nav>
</div>

{# Tab Content #}
<div class="bg-white shadow rounded-lg">
    {% if current_tab == 'profile' %}
        {# Profile Tab #}
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Informations Personnelles</h3>
            <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Email</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ user.email }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Nom d'utilisateur</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ user.username|default('N/A') }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Prénom</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ user.firstName|default('N/A') }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Nom</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ user.lastName|default('N/A') }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Téléphone</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ user.phone|default('N/A') }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Langue</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ user.preferredLanguage|default('fr') }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Fuseau horaire</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ user.timezone|default('Africa/Dakar') }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Rôles</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        <div class="flex flex-wrap gap-1">
                            {% for role in user.roles %}
                                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ role == 'ROLE_ADMIN' ? 'bg-purple-100 text-purple-800' : 'bg-gray-100 text-gray-800' }}">
                                    {{ role }}
                                </span>
                            {% endfor %}
                        </div>
                    </dd>
                </div>
                <div class="sm:col-span-2">
                    <dt class="text-sm font-medium text-gray-500">Bio</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ user.bio|default('Aucune biographie') }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Date d'inscription</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ user.createdAt|date('d/m/Y à H:i') }}</dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Dernière mise à jour</dt>
                    <dd class="mt-1 text-sm text-gray-900">{{ user.updatedAt|date('d/m/Y à H:i') }}</dd>
                </div>
            </dl>

            <h3 class="text-lg leading-6 font-medium text-gray-900 mt-8 mb-4">Préférences</h3>
            <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-3">
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Notifications Email</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ user.emailNotifications ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                            {{ user.emailNotifications ? 'Activées' : 'Désactivées' }}
                        </span>
                    </dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Notifications Sécurité</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ user.securityNotifications ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                            {{ user.securityNotifications ? 'Activées' : 'Désactivées' }}
                        </span>
                    </dd>
                </div>
                <div class="sm:col-span-1">
                    <dt class="text-sm font-medium text-gray-500">Notifications Système</dt>
                    <dd class="mt-1 text-sm text-gray-900">
                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ user.systemNotifications ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                            {{ user.systemNotifications ? 'Activées' : 'Désactivées' }}
                        </span>
                    </dd>
                </div>
            </dl>

            <div class="mt-8 flex justify-between border-t border-gray-200 pt-4">
                <form method="post" action="{{ path('admin_users_toggle_active', {id: user.id}) }}" data-controller="form-submit" onsubmit="return confirm('Êtes-vous sûr de vouloir {{ user.isActive ? 'désactiver' : 'activer' }} ce compte ?');">
                    <input type="hidden" name="_token" value="{{ csrf_token('toggle_active' ~ user.id) }}">
                    <button type="submit" data-form-submit-target="submit" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white {{ user.isActive ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700' }} focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-{{ user.isActive ? 'red' : 'green' }}-500">
                        <i class="fas fa-{{ user.isActive ? 'ban' : 'check' }} mr-2"></i>
                        <span data-form-submit-target="buttonText">{{ user.isActive ? 'Désactiver' : 'Activer' }} le compte</span>
                        <span data-form-submit-target="spinner" class="hidden ml-2">
                            <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        </span>
                    </button>
                </form>

                <form method="post" action="{{ path('admin_users_delete', {id: user.id}) }}" data-controller="form-submit" onsubmit="return confirm('ATTENTION : Cette action est irréversible. Êtes-vous sûr de vouloir supprimer définitivement cet utilisateur ?');">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ user.id) }}">
                    <button type="submit" data-form-submit-target="submit" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                        <i class="fas fa-trash mr-2"></i>
                        <span data-form-submit-target="buttonText">Supprimer le compte</span>
                        <span data-form-submit-target="spinner" class="hidden ml-2">
                            <svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                        </span>
                    </button>
                </form>
            </div>
        </div>

    {% elseif current_tab == 'security' %}
        {# Security Tab #}
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-6">Paramètres de Sécurité</h3>

            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                <div class="border rounded-lg p-4">
                    <h4 class="text-sm font-medium text-gray-900 mb-3">Authentification</h4>
                    <dl class="space-y-2">
                        <div>
                            <dt class="text-xs text-gray-500">Double authentification (2FA)</dt>
                            <dd class="text-sm font-medium {{ user.is2faEnabled ? 'text-green-600' : 'text-gray-600' }}">
                                <i class="fas fa-{{ user.is2faEnabled ? 'check-circle' : 'times-circle' }} mr-1"></i>
                                {{ user.is2faEnabled ? 'Activé' : 'Désactivé' }}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-xs text-gray-500">Validation IP</dt>
                            <dd class="text-sm font-medium {{ user.isIpValidationEnabled ? 'text-green-600' : 'text-gray-600' }}">
                                <i class="fas fa-{{ user.isIpValidationEnabled ? 'check-circle' : 'times-circle' }} mr-1"></i>
                                {{ user.isIpValidationEnabled ? 'Activé' : 'Désactivé' }}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-xs text-gray-500">Alertes de connexion</dt>
                            <dd class="text-sm font-medium {{ user.receiveLoginAlerts ? 'text-green-600' : 'text-gray-600' }}">
                                <i class="fas fa-{{ user.receiveLoginAlerts ? 'check-circle' : 'times-circle' }} mr-1"></i>
                                {{ user.receiveLoginAlerts ? 'Activé' : 'Désactivé' }}
                            </dd>
                        </div>
                    </dl>
                </div>

                <div class="border rounded-lg p-4">
                    <h4 class="text-sm font-medium text-gray-900 mb-3">Mot de passe</h4>
                    <dl class="space-y-2">
                        <div>
                            <dt class="text-xs text-gray-500">Changement requis</dt>
                            <dd class="text-sm font-medium {{ user.mustChangePassword ? 'text-orange-600' : 'text-green-600' }}">
                                <i class="fas fa-{{ user.mustChangePassword ? 'exclamation-triangle' : 'check-circle' }} mr-1"></i>
                                {{ user.mustChangePassword ? 'Oui' : 'Non' }}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-xs text-gray-500">Dernier changement</dt>
                            <dd class="text-sm font-medium text-gray-900">
                                {{ user.lastPasswordChangedAt ? user.lastPasswordChangedAt|date('d/m/Y à H:i') : 'Jamais' }}
                            </dd>
                        </div>
                    </dl>
                </div>
            </div>

            {% if security_activities is defined and security_activities is not empty %}
                <h4 class="text-sm font-medium text-gray-900 mt-6 mb-3">Événements de Sécurité Récents</h4>
                <div class="border rounded-lg overflow-hidden">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Description</th>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">IP</th>
                                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            {% for activity in security_activities %}
                                <tr class="{{ activity.isSuspicious ? 'bg-yellow-50' : '' }}">
                                    <td class="px-4 py-3 text-sm text-gray-900">{{ activity.activityType }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-500">{{ activity.description|u.truncate(60, '...') }}</td>
                                    <td class="px-4 py-3 text-sm font-mono text-gray-500">{{ activity.ipAddress|default('N/A') }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-500">{{ activity.createdAt|date('d/m/Y H:i') }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </div>

    {% elseif current_tab == 'activities' %}
        {# Activities Tab #}
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Historique des Activités</h3>

            {% if activities is empty %}
                <p class="text-sm text-gray-500 text-center py-8">Aucune activité enregistrée</p>
            {% else %}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Catégorie</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Description</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">IP</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            {% for activity in activities %}
                                <tr class="{{ activity.isSuspicious ? 'bg-yellow-50' : '' }}">
                                    <td class="px-4 py-3 text-sm text-gray-900">
                                        {% if activity.isSuspicious %}
                                            <i class="fas fa-exclamation-triangle text-yellow-600 mr-1"></i>
                                        {% endif %}
                                        {{ activity.activityType }}
                                    </td>
                                    <td class="px-4 py-3 text-sm">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                            {{ activity.activityCategory }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-500">{{ activity.description|default('')|u.truncate(50, '...') }}</td>
                                    <td class="px-4 py-3 text-sm font-mono text-gray-500">{{ activity.ipAddress|default('N/A') }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-500">{{ activity.createdAt|date('d/m/Y H:i') }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {# Pagination for activities #}
                {% if activities.pageCount > 1 %}
                    <div class="mt-4">
                        {{ knp_pagination_render(activities) }}
                    </div>
                {% endif %}
            {% endif %}
        </div>

    {% elseif current_tab == 'devices' %}
        {# Devices Tab #}
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Appareils Enregistrés</h3>

            {% if devices is empty %}
                <p class="text-sm text-gray-500 text-center py-8">Aucun appareil enregistré</p>
            {% else %}
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    {% for device in devices %}
                        <div class="border rounded-lg p-4 {{ device.isTrusted ? 'border-green-200 bg-green-50' : 'border-gray-200' }}">
                            <div class="flex items-start justify-between">
                                <div class="flex items-center">
                                    <i class="fas fa-{{ device.deviceType == 'mobile' ? 'mobile-alt' : (device.deviceType == 'tablet' ? 'tablet-alt' : 'desktop') }} text-2xl text-gray-400 mr-3"></i>
                                    <div>
                                        <h4 class="text-sm font-medium text-gray-900">{{ device.deviceName|default('Appareil inconnu') }}</h4>
                                        <p class="text-xs text-gray-500">{{ device.browser|default('N/A') }} - {{ device.os|default('N/A') }}</p>
                                    </div>
                                </div>
                                {% if device.isTrusted %}
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">
                                        <i class="fas fa-check"></i> Vérifié
                                    </span>
                                {% endif %}
                            </div>
                            <dl class="mt-3 space-y-1">
                                <div class="flex justify-between text-xs">
                                    <dt class="text-gray-500">IP :</dt>
                                    <dd class="font-mono text-gray-900">{{ device.lastIpAddress|default('N/A') }}</dd>
                                </div>
                                <div class="flex justify-between text-xs">
                                    <dt class="text-gray-500">Première connexion :</dt>
                                    <dd class="text-gray-900">{{ device.createdAt|date('d/m/Y H:i') }}</dd>
                                </div>
                                <div class="flex justify-between text-xs">
                                    <dt class="text-gray-500">Dernière utilisation :</dt>
                                    <dd class="text-gray-900">{{ device.lastSeenAt ? device.lastSeenAt|date('d/m/Y H:i') : 'N/A' }}</dd>
                                </div>
                            </dl>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

    {% elseif current_tab == 'http_logs' %}
        {# HTTP Logs Tab #}
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Requêtes HTTP</h3>

            {% if http_logs is empty %}
                <p class="text-sm text-gray-500 text-center py-8">Aucune requête HTTP enregistrée</p>
            {% else %}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Méthode</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">URL</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Statut</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">IP</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            {% for log in http_logs %}
                                <tr class="{{ log.isSuspicious ? 'bg-yellow-50' : '' }}">
                                    <td class="px-4 py-3 text-sm font-medium">
                                        <span class="px-2 py-1 text-xs font-semibold rounded {{ log.method == 'GET' ? 'bg-blue-100 text-blue-800' : (log.method == 'POST' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800') }}">
                                            {{ log.method }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-900">{{ log.uri|u.truncate(40, '...') }}</td>
                                    <td class="px-4 py-3 text-sm">
                                        <span class="px-2 py-1 text-xs font-semibold rounded {{ log.statusCode >= 200 and log.statusCode < 300 ? 'bg-green-100 text-green-800' : (log.statusCode >= 400 ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800') }}">
                                            {{ log.statusCode }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-sm font-mono text-gray-500">{{ log.ipAddress|default('N/A') }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-500">{{ log.createdAt|date('d/m/Y H:i') }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {# Pagination for http_logs #}
                {% if http_logs.pageCount > 1 %}
                    <div class="mt-4">
                        {{ knp_pagination_render(http_logs) }}
                    </div>
                {% endif %}
            {% endif %}
        </div>

    {% elseif current_tab == 'login_attempts' %}
        {# Login Attempts Tab #}
        <div class="px-4 py-5 sm:p-6">
            <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Tentatives de Connexion</h3>

            {% if login_attempts is empty %}
                <p class="text-sm text-gray-500 text-center py-8">Aucune tentative de connexion enregistrée</p>
            {% else %}
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Statut</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Email utilisé</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">IP</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Raison échec</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Date</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            {% for attempt in login_attempts %}
                                <tr class="{{ not attempt.successful ? 'bg-red-50' : '' }}">
                                    <td class="px-4 py-3 text-sm">
                                        <span class="px-2 py-1 text-xs font-semibold rounded-full {{ attempt.successful ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                            <i class="fas fa-{{ attempt.successful ? 'check' : 'times' }}"></i>
                                            {{ attempt.successful ? 'Succès' : 'Échec' }}
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-900">{{ attempt.email }}</td>
                                    <td class="px-4 py-3 text-sm font-mono text-gray-500">{{ attempt.ipAddress|default('N/A') }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-500">{{ attempt.failureReason|default('N/A') }}</td>
                                    <td class="px-4 py-3 text-sm text-gray-500">{{ attempt.attemptedAt|date('d/m/Y H:i') }}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                {# Pagination for login_attempts #}
                {% if login_attempts.pageCount > 1 %}
                    <div class="mt-4">
                        {{ knp_pagination_render(login_attempts) }}
                    </div>
                {% endif %}
            {% endif %}
        </div>
    {% endif %}
</div>
{% endblock %}