<!-- Page Header -->
<div class="nk-block-head nk-block-head-sm">
    <div class="nk-block-between">
        <div class="nk-block-head-content">
            <h3 class="nk-block-title page-title">Dashboard</h3>
            <div class="nk-block-des text-soft">
                <p>Bienvenido a tu panel de control</p>
            </div>
        </div>
    </div>
</div>

<!-- Welcome Card -->
<div class="nk-block">
    <div class="row g-gs">
        <div class="col-12">
            <div class="card card-bordered">
                <div class="card-inner">
                    <div class="card-title-group align-start mb-2">
                        <div class="card-title">
                            <h6 class="title">Bienvenido, <?= htmlspecialchars(_SLM::$session['user']['name'] ?? 'Usuario') ?>!</h6>
                        </div>
                    </div>
                    <p class="text-soft">
                        Este es tu panel de control del SLM Framework. Usa la barra lateral para navegar por la aplicación.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Stats Cards -->
<div class="nk-block">
    <div class="row g-gs">
        <div class="col-md-6 col-xxl-3">
            <div class="card card-bordered">
                <div class="card-inner">
                    <div class="card-title-group align-start mb-2">
                        <div class="card-title">
                            <h6 class="title">Total Usuarios</h6>
                        </div>
                        <div class="card-tools">
                            <em class="card-hint icon ni ni-users"></em>
                        </div>
                    </div>
                    <div class="align-end flex-sm-wrap g-4 flex-md-nowrap">
                        <div class="nk-sale-data">
                            <span class="amount" id="stat-users">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xxl-3">
            <div class="card card-bordered">
                <div class="card-inner">
                    <div class="card-title-group align-start mb-2">
                        <div class="card-title">
                            <h6 class="title">Activos</h6>
                        </div>
                        <div class="card-tools">
                            <em class="card-hint icon ni ni-check-circle text-success"></em>
                        </div>
                    </div>
                    <div class="align-end flex-sm-wrap g-4 flex-md-nowrap">
                        <div class="nk-sale-data">
                            <span class="amount" id="stat-active">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xxl-3">
            <div class="card card-bordered">
                <div class="card-inner">
                    <div class="card-title-group align-start mb-2">
                        <div class="card-title">
                            <h6 class="title">Items</h6>
                        </div>
                        <div class="card-tools">
                            <em class="card-hint icon ni ni-list"></em>
                        </div>
                    </div>
                    <div class="align-end flex-sm-wrap g-4 flex-md-nowrap">
                        <div class="nk-sale-data">
                            <span class="amount" id="stat-items">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-xxl-3">
            <div class="card card-bordered">
                <div class="card-inner">
                    <div class="card-title-group align-start mb-2">
                        <div class="card-title">
                            <h6 class="title">Actividad</h6>
                        </div>
                        <div class="card-tools">
                            <em class="card-hint icon ni ni-activity text-warning"></em>
                        </div>
                    </div>
                    <div class="align-end flex-sm-wrap g-4 flex-md-nowrap">
                        <div class="nk-sale-data">
                            <span class="amount" id="stat-activity">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Quick Actions -->
<div class="nk-block">
    <div class="row g-gs">
        <div class="col-lg-6">
            <div class="card card-bordered h-100">
                <div class="card-inner">
                    <div class="card-title-group mb-2">
                        <div class="card-title">
                            <h6 class="title">Acciones Rápidas</h6>
                        </div>
                    </div>
                    <ul class="nk-list-link">
                        <li><a href="./?v=example.items"><em class="icon ni ni-list"></em><span>Ver Items (Ejemplo CRUD)</span></a></li>
                        <li><a href="#" onclick="loadStats()"><em class="icon ni ni-reload"></em><span>Actualizar Estadísticas</span></a></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card card-bordered h-100">
                <div class="card-inner">
                    <div class="card-title-group mb-2">
                        <div class="card-title">
                            <h6 class="title">Primeros Pasos</h6>
                        </div>
                    </div>
                    <ul class="nk-list-link">
                        <li><em class="icon ni ni-check text-success"></em><span>Revisa el módulo <code>example</code> para operaciones CRUD</span></li>
                        <li><em class="icon ni ni-check text-success"></em><span>Consulta la carpeta <code>docs/</code> para documentación</span></li>
                        <li><em class="icon ni ni-check text-success"></em><span>Configura <code>.env</code> para tu entorno</span></li>
                        <li><em class="icon ni ni-check text-success"></em><span>Crea índices Elasticsearch con datos iniciales</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
