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

{% block title %}Logs pour {{ entity }} #{{ entityId }}{% 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-history"></i> Historique
            <span class="badge bg-light text-dark">{{ entity }}</span>
            <small class="text-muted">#{{ entityId }}</small>
        </h1>
        <div>
            <a href="{{ path('app_activity_log_list') }}" class="btn btn-primary">
                <i class="fas fa-list"></i> Tous les logs
            </a>
            <a href="javascript:history.back()" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Retour
            </a>
        </div>
    </div>

    {% if logs %}
        <div class="card">
            <div class="card-header">
                <i class="fas fa-timeline"></i> {{ logs|length }} action(s) enregistrée(s) pour cette entité
            </div>
            <div class="card-body p-0">
                <div class="timeline">
                    {% for log in logs %}
                        <div class="timeline-item">
                            <div class="timeline-marker timeline-marker-{{ log.level }}">
                                <i class="fas {{ log.actionIcon }}"></i>
                            </div>
                            <div class="timeline-content">
                                <div class="timeline-header">
                                    <span class="{{ log.actionBadgeClass }}">{{ log.action }}</span>
                                    <span class="{{ log.levelBadgeClass }} ms-2">{{ log.level }}</span>
                                    <span class="text-muted ms-auto">{{ log.formattedCreatedAt }}</span>
                                </div>
                                
                                {% if log.description %}
                                    <div class="timeline-body mt-2">
                                        <p class="mb-1">{{ log.description }}</p>
                                    </div>
                                {% endif %}

                                <div class="timeline-footer mt-2">
                                    <div class="row text-muted small">
                                        <div class="col-md-4">
                                            <i class="fas fa-user"></i> {{ log.userName }}
                                        </div>
                                        {% if log.ipAddress %}
                                            <div class="col-md-4">
                                                <i class="fas fa-map-marker-alt"></i> {{ log.ipAddress }}
                                            </div>
                                        {% endif %}
                                        {% if log.method %}
                                            <div class="col-md-4">
                                                <span class="badge badge-method-{{ log.method|lower }}">{{ log.method }}</span>
                                            </div>
                                        {% endif %}
                                    </div>

                                    {% if log.data %}
                                        <div class="mt-2">
                                            <button class="btn btn-sm btn-outline-secondary" 
                                                    type="button" 
                                                    data-bs-toggle="collapse" 
                                                    data-bs-target="#data-{{ log.id }}" 
                                                    aria-expanded="false">
                                                <i class="fas fa-code"></i> Voir les données
                                            </button>
                                        </div>
                                        <div class="collapse mt-2" id="data-{{ log.id }}">
                                            <div class="card card-body">
                                                <pre><code class="json">{{ log.data|json_encode(constant('JSON_PRETTY_PRINT')) }}</code></pre>
                                            </div>
                                        </div>
                                    {% endif %}

                                    <div class="mt-2">
                                        <a href="{{ path('app_activity_log_view', {id: log.id}) }}" 
                                           class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-eye"></i> Détails
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% else %}
        <div class="card">
            <div class="card-body text-center py-5">
                <i class="fas fa-history fa-3x text-muted mb-3"></i>
                <h5>Aucun historique</h5>
                <p class="text-muted">Aucune action n'a encore été enregistrée pour cette entité.</p>
            </div>
        </div>
    {% endif %}
</div>

<style>
.timeline {
    position: relative;
    padding: 0;
    list-style: none;
}

.timeline:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    width: 2px;
    margin-left: -1px;
    content: "";
    background-color: #e9ecef;
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 100px;
}

.timeline-marker {
    position: absolute;
    top: 0;
    left: 25px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
}

.timeline-marker-info { background-color: #17a2b8; }
.timeline-marker-success { background-color: #28a745; }
.timeline-marker-warning { background-color: #ffc107; color: #212529; }
.timeline-marker-error { background-color: #dc3545; }

.timeline-content {
    position: relative;
    padding: 1rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

.timeline-content:before {
    position: absolute;
    top: 15px;
    left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #dee2e6;
    content: "";
}

.timeline-content:after {
    position: absolute;
    top: 16px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid #f8f9fa;
    content: "";
}

.timeline-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.timeline-body {
    margin-top: 0.5rem;
}

.timeline-footer {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #dee2e6;
}

.badge-method-get { background-color: #28a745; }
.badge-method-post { background-color: #007bff; }
.badge-method-put { background-color: #ffc107; color: #212529; }
.badge-method-patch { background-color: #fd7e14; }
.badge-method-delete { background-color: #dc3545; }

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