{% extends "base.html" %}

{% 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>
                    <td class="people">
                        <div class="people-de">
                            <h5>{{ cuenta.nombre }}</h5>
                        </div>
                    </td>

                    <td class="people-des">
                        <h5>{{ cuenta.get_tipo_display }}</h5>
                    </td>
                    
                    <td class="role">
                        {{ cuenta.saldo }}
                    </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>
<!-- Footer -->
{% endblock %}