{% extends "base.html" %}

{% block title %}Alertas - Admin{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <div class="mb-8">
    <h1 class="text-4xl font-bold text-gray-800 mb-2">
      <i class="fas fa-bell text-purple-600"></i> Alertas
    </h1>
    <p class="text-gray-600">Detecciones y eventos relevantes del sistema</p>
  </div>

  <div class="admin-nav flex flex-wrap gap-2 mb-8 bg-white rounded-lg shadow p-4">
    <a href="{{ url_for('admin.dashboard') }}" class="px-4 py-2 rounded hover:bg-gray-100">
      <i class="fas fa-home mr-2"></i>Dashboard
    </a>
    <a href="{{ url_for('admin.manage_users') }}" class="px-4 py-2 rounded hover:bg-gray-100">
      <i class="fas fa-users mr-2"></i>Usuarios
    </a>
    <a href="{{ url_for('admin.manage_empresas') }}" class="px-4 py-2 rounded hover:bg-gray-100">
      <i class="fas fa-building mr-2"></i>Empresas
    </a>
    <a href="{{ url_for('admin.manage_productos') }}" class="px-4 py-2 rounded hover:bg-gray-100">
      <i class="fas fa-box mr-2"></i>Productos
    </a>
    <a href="{{ url_for('admin.manage_eventos') }}" class="px-4 py-2 rounded hover:bg-gray-100">
      <i class="fas fa-calendar-alt mr-2"></i>Eventos
    </a>
    <a href="{{ url_for('admin.manage_comentarios') }}" class="px-4 py-2 rounded hover:bg-gray-100">
      <i class="fas fa-comments mr-2"></i>Comentarios
    </a>
    <a href="{{ url_for('admin.manage_categorias') }}" class="px-4 py-2 rounded hover:bg-gray-100">
      <i class="fas fa-tags mr-2"></i>Categorías
    </a>
    <a href="{{ url_for('admin.view_alertas') }}" class="px-4 py-2 rounded bg-purple-100 text-purple-800">
      <i class="fas fa-bell mr-2"></i>Alertas
    </a>
    <a href="{{ url_for('admin.view_logins') }}" class="px-4 py-2 rounded hover:bg-gray-100">
      <i class="fas fa-sign-in-alt mr-2"></i>Logins
    </a>
    <a href="{{ url_for('admin.view_auditoria') }}" class="px-4 py-2 rounded hover:bg-gray-100">
      <i class="fas fa-clipboard-list mr-2"></i>Auditoría
    </a>
  </div>

  <div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Fecha</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Severidad</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tipo</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Título</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Estado</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          {% for a in alertas %}
          <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ a.FechaCreacion }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold text-gray-800">{{ a.Severidad }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ a.Tipo }}</td>
            <td class="px-6 py-4 text-sm text-gray-700">
              <div class="font-medium">{{ a.Titulo }}</div>
              {% if a.Descripcion %}
                <div class="text-gray-500 text-xs mt-1">{{ a.Descripcion }}</div>
              {% endif %}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ a.Estado }}</td>
          </tr>
          {% else %}
          <tr>
            <td class="px-6 py-8 text-center text-gray-500" colspan="5">No hay alertas registradas.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}