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

{% block title %}Erreur #{{ log.id }} — Admin{% endblock %}
{% block page_title %}Erreur #{{ log.id }}{% endblock %}
{% block page_subtitle %}{{ log.occurredAt|date('d/m/Y H:i:s') }}{% endblock %}

{% block admin_body %}
<nav class="adm-breadcrumb">
    <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
    <a href="{{ path('app_admin') }}">Dashboard</a>
    <span class="adm-bc-sep">›</span>
    <a href="{{ path('app_admin_error_log_index') }}">Journal des erreurs</a>
    <span class="adm-bc-sep">›</span>
    <span class="adm-bc-current">#{{ log.id }}</span>
</nav>

<div class="adm-card" style="padding:28px;position:relative;z-index:1;max-width:900px">

    {# ── Header ── #}
    <div style="display:flex;align-items:center;gap:12px;margin-bottom:20px">
        {% if log.level == 'critical' or log.level == 'alert' or log.level == 'emergency' %}
            <span class="adm-pill adm-pill-banned">{{ log.level|upper }}</span>
        {% else %}
            <span class="adm-pill" style="background:rgba(255,107,138,.1);color:var(--red);border:1px solid rgba(255,107,138,.2)">{{ log.level|upper }}</span>
        {% endif %}
        <span class="adm-pill {{ log.resolved ? 'adm-pill-active' : 'adm-pill-paused' }}">{{ log.resolved ? 'Résolu' : 'Non résolu' }}</span>
        <span style="font-size:.78rem;color:var(--muted);margin-left:auto">{{ log.occurredAt|date('d/m/Y à H:i:s') }}</span>
    </div>

    {# ── Info ── #}
    <div style="display:flex;flex-direction:column;gap:14px;margin-bottom:24px">
        <div class="adm-show-field">
            <span class="adm-show-label">Message</span>
            <span class="adm-show-value" style="font-size:.85rem;line-height:1.6;word-break:break-word">{{ log.message }}</span>
        </div>
        <div class="adm-show-field">
            <span class="adm-show-label">URL</span>
            <span class="adm-show-value" style="font-size:.82rem;word-break:break-all">{{ log.url ?? '—' }}</span>
        </div>
        <div class="adm-show-field">
            <span class="adm-show-label">Utilisateur</span>
            <span class="adm-show-value">{{ log.userEmail ?? 'Anonyme' }}</span>
        </div>
    </div>

    {# ── Stack trace ── #}
    {% if log.stackTrace %}
    <div style="margin-bottom:24px">
        <span class="adm-show-label" style="display:block;margin-bottom:8px">Stack trace</span>
        <pre style="background:rgba(30,30,50,.06);padding:16px;border-radius:10px;font-size:.75rem;line-height:1.6;color:var(--text);overflow-x:auto;max-height:400px;overflow-y:auto;white-space:pre-wrap;word-break:break-word">{{ log.stackTrace }}</pre>
    </div>
    {% endif %}

    {# ── Actions ── #}
    <div style="display:flex;gap:8px;padding-top:18px;border-top:1px solid rgba(180,190,220,.2)">
        <form action="{{ path('app_admin_error_log_resolve', {uuid: log.uuid}) }}" method="post" style="display:inline">
            <input type="hidden" name="_token" value="{{ csrf_token('resolve-' ~ log.uuid) }}">
            <button type="submit" class="adm-btn {{ log.resolved ? 'adm-btn-g' : 'adm-btn-p' }} adm-btn-sm">
                {% if log.resolved %}
                    Marquer non résolu
                {% else %}
                    <svg viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px"><polyline points="20 6 9 17 4 12"/></svg>
                    Marquer résolu
                {% endif %}
            </button>
        </form>
        <button type="button" class="adm-btn adm-btn-red adm-btn-sm" id="show-delete-btn">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
            Supprimer
        </button>
        <a href="{{ path('app_admin_error_log_index') }}" class="adm-btn adm-btn-g adm-btn-sm" style="margin-left:auto">Retour</a>
    </div>
</div>

{# ── Delete modal ── #}
<div class="adm-modal-overlay" id="adm-delete-overlay">
    <div class="adm-modal" onclick="event.stopPropagation()">
        <div class="adm-modal-icon">
            <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
        </div>
        <h3>Confirmer la suppression</h3>
        <p>Vous êtes sur le point de supprimer l'erreur <strong>#{{ log.id }}</strong>.</p>
        <div class="adm-modal-warn">
            <svg viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
            Cette action est irréversible.
        </div>
        <div class="adm-modal-foot">
            <button class="adm-btn adm-btn-g" id="adm-delete-cancel">Annuler</button>
            <form action="{{ path('app_admin_error_log_delete', {uuid: log.uuid}) }}" method="post" style="display:inline">
                <input type="hidden" name="_token" value="{{ csrf_token('delete-' ~ log.uuid) }}">
                <button type="submit" class="adm-btn adm-btn-red">
                    <svg viewBox="0 0 24 24" style="width:14px;height:14px;margin-right:4px"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/></svg>
                    Supprimer
                </button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script>
(function () {
    var btn = document.getElementById('show-delete-btn');
    var overlay = document.getElementById('adm-delete-overlay');
    var cancel = document.getElementById('adm-delete-cancel');
    if (!btn || !overlay) return;
    btn.addEventListener('click', function () { overlay.classList.add('open'); });
    cancel.addEventListener('click', function () { overlay.classList.remove('open'); });
    overlay.addEventListener('click', function (e) { if (e.target === overlay) overlay.classList.remove('open'); });
})();
</script>
{% endblock %}