{% extends 'base.html.twig' %}
{% block title %}Detalle de bitacora{% endblock %}

{% block content_header %}
  <div class="mb-6">
    <a class="text-sm text-primary-700 hover:underline" href="{{ path('config_auditoria') }}">Volver</a>
    <h2 class="mt-2 text-2xl font-bold text-secondary-900">Detalle de bitacora</h2>
    <p class="text-sm text-secondary-500">{{ evento.event_uuid }}</p>
  </div>
{% endblock %}

{% block content %}
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="bg-white shadow rounded-lg p-6 lg:col-span-1">
      <dl class="space-y-3 text-sm">
        <div><dt class="font-semibold text-secondary-700">Fecha</dt><dd>{{ evento.occurred_at }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Usuario</dt><dd>{{ evento.usuario_nombre ?: 'Sistema' }}<br>{{ evento.usuario_email }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Cliente / Sitio</dt><dd>{{ evento.cliente_nombre ?: evento.cliente_id }} / {{ evento.sitio_nombre ?: evento.sitio_id }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Accion</dt><dd>{{ evento.modulo }} / {{ evento.accion }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Entidad</dt><dd>{{ evento.entidad }} #{{ evento.entidad_id ?: 'N/A' }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Resultado</dt><dd>{{ evento.resultado }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">IP</dt><dd>{{ evento.ip }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Ruta</dt><dd>{{ evento.metodo_http }} {{ evento.ruta }}</dd></div>
        <div><dt class="font-semibold text-secondary-700">Request</dt><dd>{{ evento.request_id }}<br>{{ evento.correlation_id }}</dd></div>
      </dl>
    </div>

    <div class="bg-white shadow rounded-lg p-6 lg:col-span-2 space-y-6">
      <section>
        <h3 class="text-sm font-semibold uppercase text-secondary-500 mb-2">Diff</h3>
        <pre class="overflow-auto rounded bg-secondary-950 p-4 text-xs text-secondary-50">{{ evento.diff_data|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
      </section>
      <section>
        <h3 class="text-sm font-semibold uppercase text-secondary-500 mb-2">Antes</h3>
        <pre class="overflow-auto rounded bg-secondary-950 p-4 text-xs text-secondary-50">{{ evento.before_data|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
      </section>
      <section>
        <h3 class="text-sm font-semibold uppercase text-secondary-500 mb-2">Despues</h3>
        <pre class="overflow-auto rounded bg-secondary-950 p-4 text-xs text-secondary-50">{{ evento.after_data|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
      </section>
      <section>
        <h3 class="text-sm font-semibold uppercase text-secondary-500 mb-2">Metadata</h3>
        <pre class="overflow-auto rounded bg-secondary-950 p-4 text-xs text-secondary-50">{{ evento.metadata|json_encode(constant('JSON_PRETTY_PRINT')) }}</pre>
      </section>
    </div>
  </div>
{% endblock %}