{% extends "base.html" %}

{% block title %}Logs de Login - 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-sign-in-alt text-purple-600"></i> Logs de Login
    </h1>
    <p class="text-gray-600">Intentos exitosos y fallidos</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 hover:bg-gray-100">
      <i class="fas fa-bell mr-2"></i>Alertas
    </a>
    <a href="{{ url_for('admin.view_logins') }}" class="px-4 py-2 rounded bg-purple-100 text-purple-800">
      <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">Email</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Resultado</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">TipoFallo</th>
            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">IP</th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">
          {% for l in logins %}
          <tr>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ l.FechaHora }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ l.Email }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-semibold">
              {% if l.Exitoso %}
                <span class="text-green-700">Éxito</span>
              {% else %}
                <span class="text-red-700">Fallo</span>
              {% endif %}
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ l.TipoFallo or '' }}</td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ l.IP }}</td>
          </tr>
          {% else %}
          <tr>
            <td class="px-6 py-8 text-center text-gray-500" colspan="5">No hay registros de login.</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}