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

{% block title %}Détails du log - {{ log.action }}{% endblock %}

{% block body %}
<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="mt-4">
            <i class="fas fa-eye"></i> Détails du log
        </h1>
        <a href="{{ path('app_activity_log_list') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Retour à la liste
        </a>
    </div>

    <div class="row">
        <!-- Informations principales -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-info-circle"></i> Informations principales
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tbody>
                            <tr>
                                <th style="width: 30%;">ID:</th>
                                <td>#{{ log.id }}</td>
                            </tr>
                            <tr>
                                <th>Date:</th>
                                <td>{{ log.formattedCreatedAt }}</td>
                            </tr>
                            <tr>
                                <th>Action:</th>
                                <td><span class="{{ log.actionBadgeClass }}">{{ log.action }}</span></td>
                            </tr>
                            <tr>
                                <th>Entité:</th>
                                <td>
                                    <span class="badge bg-light text-dark">{{ log.entity }}</span>
                                    {% if log.entityId %}
                                        <small class="text-muted ms-1">#{{ log.entityId }}</small>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Niveau:</th>
                                <td><span class="{{ log.levelBadgeClass }}">{{ log.level }}</span></td>
                            </tr>
                            <tr>
                                <th>Description:</th>
                                <td>{{ log.description ?? '-' }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Informations techniques -->
        <div class="col-md-6">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-cog"></i> Informations techniques
                </div>
                <div class="card-body">
                    <table class="table table-borderless">
                        <tbody>
                            <tr>
                                <th style="width: 30%;">Utilisateur:</th>
                                <td>{{ log.userName }}</td>
                            </tr>
                            <tr>
                                <th>Adresse IP:</th>
                                <td>{{ log.ipAddress ?? '-' }}</td>
                            </tr>
                            <tr>
                                <th>URL:</th>
                                <td>
                                    {% if log.url %}
                                        <code class="text-break">{{ log.url }}</code>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Méthode HTTP:</th>
                                <td>
                                    {% if log.method %}
                                        <span class="badge badge-method-{{ log.method|lower }}">{{ log.method }}</span>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>User Agent:</th>
                                <td>
                                    {% if log.userAgent %}
                                        <small class="text-muted text-break">{{ log.userAgent }}</small>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Données supplémentaires -->
    {% if log.data %}
        <div class="card mb-4">
            <div class="card-header">
                <i class="fas fa-database"></i> Données supplémentaires
            </div>
            <div class="card-body">
                <pre><code class="json">{{ log.data|json_encode(constant('JSON_PRETTY_PRINT')) }}</code></pre>
            </div>
        </div>
    {% endif %}

    <!-- Logs liés à la même entité -->
    {% if log.entityId %}
        <div class="card">
            <div class="card-header">
                <i class="fas fa-link"></i> Autres logs pour cette entité
            </div>
            <div class="card-body">
                <a href="{{ path('app_activity_log_entity', {entity: log.entity, entityId: log.entityId}) }}" 
                   class="btn btn-outline-primary">
                    <i class="fas fa-list"></i> Voir tous les logs pour {{ log.entity }} #{{ log.entityId }}
                </a>
            </div>
        </div>
    {% endif %}
</div>

<style>
.badge-method-get { background-color: #28a745 !important; }
.badge-method-post { background-color: #007bff !important; }
.badge-method-put { background-color: #ffc107 !important; }
.badge-method-patch { background-color: #fd7e14 !important; }
.badge-method-delete { background-color: #dc3545 !important; }

.json {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 0.75rem;
    max-height: 300px;
    overflow-y: auto;
}
</style>
{% endblock %}