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

{% block interface %}

<section id="interface">
    {% include "_navigation.html" %}
    
    <h3 class="i-name">
        Mis Cuentas
    </h3>
    
    <div class="board">    
        <table width="100%">
            <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 'ver_cuenta' cuenta.id %}">{{ cuenta.nombre }}</a>
                    </td>

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

                    <td class="edit">
                        <a href="{% url 'editar_cuenta' cuenta.id %}">
                            <i class="bi bi-pencil-square"></i>
                        </a>                        
                        <a href="{% url 'eliminar_cuenta' cuenta.id %}">
                            <i class="bi bi-trash3"></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="botones">
            <a href="{% url 'agregar_cuenta' %}"><button class="btn btn-primary" type="button">Agregar cuenta</button></a> 
            <a href="{% url 'dashboard' %}"><button class="btn btn-secondary" type="button">Volver al Dashboard</button></a>
        </div>
    </div>
</section>
{% endblock %}