<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="es">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>TAI – AGE | Administración de usuarios</title>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/css/admin.css}"/>
</head>
<body>

<!-- Topbar -->
<nav class="topbar">
    <span class="topbar-brand">TAI – AGE</span>
    <span class="admin-badge">ADMIN</span>
    <nav class="topbar-nav" style="margin-left: auto">
        <a th:href="@{/curso}">Curso</a>
        <form th:action="@{/logout}" method="post" style="margin:0"
              onsubmit="return confirm('¿Cerrar sesión?')">
            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
            <button type="submit" style="background:none;border:none;cursor:pointer;color:var(--error);font:inherit;padding:0">Salir</button>
        </form>
    </nav>
</nav>

<div class="admin-wrap">
    <h1>Gestión de usuarios</h1>

    <!-- Error flash -->
    <div th:if="${error}" class="msg-error" th:text="${error}"></div>

    <!-- ── Crear nuevo usuario ── -->
    <form th:action="@{/admin/usuarios/nuevo}" method="post" class="nuevo-form">
        <h3>Añadir usuario</h3>
        <input type="email"    name="email"    placeholder="email@ejemplo.com" required/>
        <input type="password" name="password" placeholder="Contraseña (mín. 8 car.)" required minlength="8"/>
        <label class="check-label">
            <input type="checkbox" name="pagado" value="true"/>
            Acceso al curso
        </label>
        <button type="submit" class="nuevo-btn">Crear</button>
    </form>

    <!-- ── Tabla de usuarios ── -->
    <table class="usuarios-table">
        <thead>
        <tr>
            <th>Email</th>
            <th>Cuenta</th>
            <th>Curso</th>
            <th>Rol</th>
            <th>Acciones</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="u : ${usuarios}">
            <td th:text="${u.email}">usuario@ejemplo.com</td>

            <!-- Habilitado -->
            <td>
                <span th:if="${u.habilitado}"  class="badge badge-on">Activa</span>
                <span th:unless="${u.habilitado}" class="badge badge-off">Inactiva</span>
            </td>

            <!-- Acceso al curso -->
            <td>
                <span th:if="${u.pagado}"  class="badge badge-on">Sí</span>
                <span th:unless="${u.pagado}" class="badge badge-off">No</span>
            </td>

            <!-- Admin? -->
            <td>
                <span th:if="${u.admin}" class="badge badge-admin">Admin</span>
                <span th:unless="${u.admin}" class="badge" style="color:var(--text-muted)">Usuario</span>
            </td>

            <!-- Acciones -->
            <td>
                <div class="acciones">
                    <!-- Toggle habilitado -->
                    <form th:action="@{/admin/usuarios/{id}/toggle-habilitado(id=${u.id})}" method="post">
                        <button type="submit" class="btn-accion"
                                th:text="${u.habilitado} ? 'Desactivar' : 'Activar'">Activar</button>
                    </form>
                    <!-- Toggle acceso curso -->
                    <form th:action="@{/admin/usuarios/{id}/toggle-pagado(id=${u.id})}" method="post">
                        <button type="submit" class="btn-accion"
                                th:text="${u.pagado} ? 'Quitar curso' : 'Dar curso'">Dar curso</button>
                    </form>
                    <!-- Eliminar (no permite eliminar si es admin) -->
                    <form th:unless="${u.admin}"
                          th:action="@{/admin/usuarios/{id}/eliminar(id=${u.id})}" method="post"
                          onsubmit="return confirm('¿Eliminar usuario ' + this.dataset.email + '?')"
                          th:data-email="${u.email}">
                        <button type="submit" class="btn-accion danger">Eliminar</button>
                    </form>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

</body>
</html>
