{% extends "base.html" %}
{% load humanize %}
{% load filtros_de_entorno %}

{% block content %}

<div class="container-xl">
    <div class="position-relative mb-3">  
        <h3 class="i-name">
            Mis Cuentas
        </h3>
        
        <div class="row g-4 mb-4">
            <table width="100%" class="table app-table-hover mb-0 text-left">
                <thead>
                    <tr>
                        <td>Nombre</td>
                        <td>Tipo</td>
                        <td>Saldo</td>
                        <td>Acciones</td>
                        <td>Favorita</td>
                    </tr>
                </thead>

                <tbody>
                {% for cuenta in cuentas %}
                    <tr class="{% cycle 'fila-impar' 'fila-par' %}">
                        <td class="movimiento">
                            <a href="{% url 'informe_cuenta' %}?cuenta_id={{ cuenta.id }}&fecha_inicio={{ fecha_inicio }}&fecha_fin={{ fecha_fin }}">{{ cuenta.nombre }}</a>
                        </td>

                        <td class="movimiento">
                            {{ cuenta.tipo }}
                        </td>
                        
                        <td class="movimiento-monto" style="width: 20px;">
                            {{ cuenta.saldo|formato_numero:2 }}
                        </td>

                        <td class="edit">                      
                            <a href="{% url 'informe_cuenta' %}?cuenta_id={{ cuenta.id }}&fecha_inicio={{ fecha_inicio }}&fecha_fin={{ fecha_fin }}">
                                <i class="bi bi-filetype-pdf"></i>
                            </a>
                        </td>   
                        <td>{% if cuenta.favorita %}⭐{% else %}-{% endif %}</td>
                
                    </tr>
                {% empty %}
                    <tr><td colspan="3">No tienes cuentas aún.</td></tr>
                {% endfor %}
                </tbody>
            </table>
            <div class="row g-4 mb-4">
                <a href="{% url 'dashboard' %}"><button class="btn btn-secondary" type="button">Volver al Dashboard</button></a>
            </div>
        </div>
    </div>
</div>
{% endblock %}