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

{% block interface %}

<section id="interface">
    {% include "_navigation.html" %}
    
    <h3 class="i-name">
        Movimientos de la cuenta: {{ cuenta.nombre }}
    </h3>

    <div class="board">  
        <div class="form-group">
            <form method="get">
                <div class="row g-2 align-items-end">
                    <div class="col-auto">
                        {{ form.mes }}
                    </div>
                    <div class="col-auto">
                        {{ form.anio }}
                     </div>
                    <div class="col-auto">
                        {{ form.categoria }}
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary">Filtrar</button>
                    </div>
                </div>
            </form>
        </div>
  
        <table width="100%">
            <thead>
                <tr>
                    <th>Fecha</th>
                    <th>Origen</th>
                    <th>Destino</th>
                    <th>Monto</th>
                    <th>Descripción</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for mov in movimientos %}
                <tr>
                    <td>{{ mov.fecha }}</td>
                    <td>{{ mov.cuenta_origen.nombre }}</td>
                    <td>{{ mov.cuenta_destino.nombre }}</td>
                    <td style="text-align: right;">{{ mov.monto|floatformat:2 }} €</td>
                    <td>{{ mov.descripcion }}</td>
                    <td class="edit">
                        <a href="{% url 'editar_movimiento' mov.id %}">
                            <i class="bi bi-pencil-square"></i>
                        </a>                        
                        <a href="{% url 'eliminar_movimiento' mov.id %}">
                            <i class="bi bi-trash3"></i>
                        </a>                        
                        <a href="{% url 'duplicar_movimiento' mov.id %}">
                            <i class="bi bi-copy"></i>
                        </a>
                    </td> 
                </tr>
                {% endfor %}
            </tbody>
        </table>
        <div class="botones">
            <a href="{% url 'dashboard' %}"><button class="btn btn-secondary" type="button">Volver al Dashboard</button></a>
        </div>        
    </div>
</section>
{% endblock %}