{% extends "base.html" %}

{% block title %}Dashboard - Mi Aplicación{% endblock %}

{% block content %}
<header class="main-header">
    <h1>Dashboard</h1>
</header>

<section class="content-box">
    <h2>Contenido protegido</h2>
    <p>¡Felicidades! Has accedido al área protegida de la aplicación.</p>
</section>

<div class="stats-grid">
    <article class="stats-card">
        <h3>Estadísticas</h3>
        <p>Aquí puedes ver las estadísticas de uso del sistema.</p>
        <a href="#" role="button" class="outline">Ver más</a>
    </article>
    
    <article class="stats-card">
        <h3>Notificaciones</h3>
        <p>Tienes 3 notificaciones nuevas pendientes de revisar.</p>
        <a href="#" role="button" class="outline">Ver todas</a>
    </article>
    
    <article class="stats-card">
        <h3>Tareas</h3>
        <p>2 tareas pendientes para hoy que requieren tu atención.</p>
        <a href="#" role="button" class="outline">Administrar</a>
    </article>
</div>

<section class="content-box">
    <h3>Actividad reciente</h3>
    <table>
        <thead>
            <tr>
                <th>Fecha</th>
                <th>Actividad</th>
                <th>Estado</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2025-04-02</td>
                <td>Inicio de sesión</td>
                <td><span class="badge badge-success">Completado</span></td>
            </tr>
            <tr>
                <td>2025-04-01</td>
                <td>Actualización de datos</td>
                <td><span class="badge badge-success">Completado</span></td>
            </tr>
            <tr>
                <td>2025-03-31</td>
                <td>Revisión de sistema</td>
                <td><span class="badge badge-success">Completado</span></td>
            </tr>
        </tbody>
    </table>
</section>
{% endblock %}