{% extends "base.html" %}
{% block title %}Logs API - Metafoliador v2{% endblock %}
{% block breadcrumb %}Logs de Peticiones API{% endblock %}
{% block content %}
<div class="page-header"><h2 class="page-title">Logs de Peticiones API</h2><button class="btn btn-secondary" onclick="loadLogs()"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>Actualizar</button></div>
<div class="card"><div class="card-body"><div class="table-responsive logs-table-responsive"><table class="table"><thead><tr>
<th data-sort="id" onclick="sortLogs('id')" style="cursor:pointer">#</th>
<th data-sort="remote_ip" onclick="sortLogs('remote_ip')" style="cursor:pointer">IP Origen</th>
<th data-sort="response_status" onclick="sortLogs('response_status')" style="cursor:pointer">HTTP</th>
<th data-sort="authorized" onclick="sortLogs('authorized')" style="cursor:pointer">Autorizado</th>
<th data-sort="duration_ms" onclick="sortLogs('duration_ms')" style="cursor:pointer">Duración</th>
<th data-sort="created_at" onclick="sortLogs('created_at')" style="cursor:pointer">Fecha</th>
<th>Detalle</th></tr></thead><tbody id="logsTable"></tbody></table></div>
<div id="pagination" style="display:flex;justify-content:center;gap:8px;margin-top:16px"></div></div></div>
<div class="modal-overlay" id="detailModal"><div class="modal" style="max-width:700px"><div class="modal-header"><h3>Detalle de Petición</h3><button class="modal-close" onclick="document.getElementById('detailModal').classList.remove('show')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div><div class="modal-body"><pre id="detailContent" style="font-size:12px;white-space:pre-wrap;word-break:break-all;max-height:60vh;overflow:auto;background:var(--bg-input);padding:12px;border-radius:8px;color:var(--text)"></pre></div></div></div>
{% endblock %}
{% block extra_js %}<script src="/static/js/listener_logs.js"></script>{% endblock %}