{% extends "base.html" %}
{% block content %}
<h1>Finanzas</h1>
<div class="grid-cards">
    <div class="card positivo"><h3>Ingresos</h3><p>{{ "%.2f"|format(ingresos) }} €</p></div>
    <div class="card negativo"><h3>Gastos</h3><p>{{ "%.2f"|format(gastos) }} €</p></div>
    <div class="card"><h3>Balance</h3><p>{{ "%.2f"|format(balance) }} €</p></div>
</div>

<form method="POST" action="/finanzas/nueva" class="formulario">
    <select name="tipo" required>
        <option value="ingreso">Ingreso</option>
        <option value="gasto">Gasto</option>
    </select>
    <input name="concepto" placeholder="Concepto" required>
    <input name="monto" type="number" step="0.01" placeholder="Monto" required>
    <input name="categoria" placeholder="Categoría">
    <label>Fecha <input name="fecha" type="date"></label>
    <button type="submit">Registrar</button>
</form>

<table>
    <tr><th>Fecha</th><th>Tipo</th><th>Concepto</th><th>Categoría</th><th>Monto</th></tr>
    {% for t in transacciones %}
    <tr>
        <td>{{ t.fecha }}</td>
        <td>{{ t.tipo }}</td>
        <td>{{ t.concepto }}</td>
        <td>{{ t.categoria or '-' }}</td>
        <td class="{{ 'positivo' if t.tipo == 'ingreso' else 'negativo' }}">{{ t.monto }} €</td>
    </tr>
    {% endfor %}
</table>
{% endblock %}