{% extends "expenses/base.html" %}

{% block title %}Home{% endblock %}

{% block content %}

    <h1>Home</h1>

    <section>
        <h2>Resumen del mes</h2>
        <p>Total: {{ kpi_total }}</p>
        <p>Gastos: {{ kpi_count }}</p>
        <p>Categorías: {{ kpi_categories }}</p>
    </section>

    <section>
        <h2>Últimos gastos</h2>
        <ul>
            {% for expense in last_expenses %}
                <li>
                    {{ expense.date }} - 
                    {{ expense.category.name }} - 
                    {{ expense.amount }}
                </li>
            {% empty %}
                <li>No hay gastos</li>
            {% endfor %}
        </ul>
    </section>

    <section>
        <div class="dashboard-grid">
            <div class="card card-chart">
                <h2>Últimos meses</h2>                
                <canvas id="miniChart"></canvas>
            </div>
        </div>

        <script>
            const labels = {{ mini_chart_labels|safe }};
            const data = {{ mini_chart_data|safe }};
            
            const ctx = document.getElementById('miniChart');

            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets:[{
                        label: 'Gastos',
                        data: data,
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false
                }
            });
        </script>  

    </section>

{% endblock %}