<!DOCTYPE html>
<html lang="es" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Dashboard | Base Admin Web</title>
    <link rel="stylesheet" th:href="@{/assets/plugins/global/plugins.bundle.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.bundle.css}">
</head>
<body id="kt_body" class="app-default">
<div class="d-flex flex-column flex-root app-root" id="kt_app_root">
    <div class="app-page flex-column flex-column-fluid" id="kt_app_page">
        <div class="app-wrapper flex-column flex-row-fluid" id="kt_app_wrapper">
            <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                <div class="d-flex flex-column flex-column-fluid">
                    <div class="app-header d-flex align-items-stretch border-bottom border-gray-200 bg-white shadow-sm">
                        <div class="app-container container-xxl d-flex align-items-center justify-content-between w-100 py-4">
                            <div>
                                <div class="fs-2 fw-bold text-gray-900">Base Admin Web</div>
                                <div class="text-gray-500 fs-7">Panel administrativo inicial</div>
                            </div>
                            <div class="d-flex align-items-center gap-3">
                                <div class="text-end">
                                    <div class="fw-semibold text-gray-800" th:text="${user.displayName}">Administrador Base</div>
                                    <div class="text-gray-500 fs-8" th:text="${user.username}">admin</div>
                                </div>
                                <form th:action="@{/logout}" method="post" class="m-0">
                                    <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
                                    <button type="submit" class="btn btn-light-danger btn-sm">Cerrar sesion</button>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="app-toolbar py-6 py-lg-8 bg-light-primary">
                        <div class="app-container container-xxl d-flex flex-stack flex-wrap">
                            <div>
                                <h1 class="text-gray-900 fw-bold mb-2">Dashboard</h1>
                                <div class="text-gray-700 fs-6">Base funcional para construir el panel administrativo.</div>
                            </div>
                            <div class="d-flex align-items-center gap-3">
                                <a th:href="@{/admin/pass-codes}" class="btn btn-primary btn-sm">Codigos pase</a>
                                <span class="badge badge-primary fs-7 fw-bold px-4 py-3">Rol activo: ADMIN</span>
                            </div>
                        </div>
                    </div>

                    <div class="app-content flex-column-fluid">
                        <div class="app-container container-xxl py-10">
                            <div class="row g-5 g-xl-8 mb-10">
                                <div class="col-xl-4">
                                    <div class="card card-flush h-xl-100">
                                        <div class="card-header pt-7">
                                            <div class="card-title d-flex flex-column">
                                                <span class="fs-2hx fw-bold text-gray-900">OK</span>
                                                <span class="text-gray-500 pt-1 fw-semibold fs-6">Autenticacion local operando</span>
                                            </div>
                                        </div>
                                        <div class="card-body d-flex flex-column justify-content-end pb-7">
                                            <span class="text-gray-700 fs-6">El acceso con usuario semilla, seguridad y persistencia ya estan listos.</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4">
                                    <div class="card card-flush h-xl-100">
                                        <div class="card-header pt-7">
                                            <div class="card-title d-flex flex-column">
                                                <span class="fs-2hx fw-bold text-gray-900">H2</span>
                                                <span class="text-gray-500 pt-1 fw-semibold fs-6">Base de datos embebida</span>
                                            </div>
                                        </div>
                                        <div class="card-body d-flex flex-column justify-content-end pb-7">
                                            <span class="text-gray-700 fs-6">La app arranca sin infraestructura externa y queda lista para migrar a PostgreSQL despues.</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4">
                                    <div class="card card-flush h-xl-100" th:style="|background-image:url('@{/assets/media/auth/bg6.jpg}'); background-size:cover; background-position:center;|
                                            ">
                                        <div class="card-body d-flex flex-column justify-content-end">
                                            <div class="bg-dark bg-opacity-50 rounded p-5">
                                                <div class="fs-3 fw-bold text-white mb-2">Metronic integrado</div>
                                                <div class="text-white opacity-75">La base visual ya quedo lista para expandir menus, modulos y catalogos.</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card">
                                <div class="card-header border-0 pt-6">
                                    <div class="card-title">
                                        <h2 class="fw-bold">Siguientes pasos sugeridos</h2>
                                    </div>
                                </div>
                                <div class="card-body pt-2">
                                    <div class="timeline-label">
                                        <div class="timeline-item">
                                            <div class="timeline-label fw-bold text-gray-800 fs-6">01</div>
                                            <div class="timeline-badge"><i class="fa fa-genderless text-primary fs-1"></i></div>
                                            <div class="timeline-content fw-semibold text-gray-700 ps-3">Crear catalogos y modulos reales del panel.</div>
                                        </div>
                                        <div class="timeline-item">
                                            <div class="timeline-label fw-bold text-gray-800 fs-6">02</div>
                                            <div class="timeline-badge"><i class="fa fa-genderless text-success fs-1"></i></div>
                                            <div class="timeline-content fw-semibold text-gray-700 ps-3">Agregar gestion de usuarios, roles y permisos finos.</div>
                                        </div>
                                        <div class="timeline-item">
                                            <div class="timeline-label fw-bold text-gray-800 fs-6">03</div>
                                            <div class="timeline-badge"><i class="fa fa-genderless text-info fs-1"></i></div>
                                            <div class="timeline-content fw-semibold text-gray-700 ps-3">Migrar de H2 a PostgreSQL cuando el dominio ya este definido.</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/assets/plugins/global/plugins.bundle.js}"></script>
<script th:src="@{/assets/js/scripts.bundle.js}"></script>
</body>
</html>
