{% extends "expenses/base.html" %}

{% block title %}
    Vincular movimientos
{% endblock %}

{% block content %}
<h1>Vincular movimientos</h1>

<p>
    Objetivo: <strong>{{ goal.name }}</strong> ({{ goal.get_kind_display|lower }}).
    {% if goal.links_incomes %}
        Marca los ingresos que cuentan como cobrados.
    {% else %}
        Marca los gastos que cuentan en este objetivo.
    {% endif %}
</p>

<p>
    Vinculado ahora mismo: <strong>{{ linked_total|floatformat:2 }}€</strong>
    de {{ goal.target_amount|floatformat:2 }}€.
</p>

{% if goal.start_date %}
    <p><small>Solo se listan movimientos desde el {{ goal.start_date|date:"d/m/Y" }}.</small></p>
{% endif %}

<form method="post" class="app-form">
    {% csrf_token %}

    <div class="table-wrap">
    <table>
        <thead>
            <tr>
                <th></th>
                <th>Fecha</th>
                <th>Importe</th>
                <th>Cuenta</th>
                <th>Concepto</th>
            </tr>
        </thead>
        <tbody>
            {% for movement in page_obj %}
            <tr>
                <td>
                    {# shown viaja con cada fila de la página: así al guardar solo #}
                    {# se toca lo que había aquí y no lo marcado en otras páginas. #}
                    <input type="hidden" name="shown" value="{{ movement.pk }}">
                    <input type="checkbox"
                           name="movements"
                           value="{{ movement.pk }}"
                           id="movement{{ movement.pk }}"
                           {% if movement.pk in linked_ids %}checked{% endif %}>
                    <label class="sr-only" for="movement{{ movement.pk }}">
                        Vincular movimiento del {{ movement.date|date:"d/m/Y" }}
                    </label>
                </td>
                <td>{{ movement.date|date:"d/m/Y" }}</td>
                <td>{{ movement.amount|floatformat:2 }}€</td>
                <td>{{ movement.account.name }}</td>
                <td>
                    {% if goal.links_incomes %}
                        {{ movement.name }}
                    {% else %}
                        {{ movement.description|default:movement.category.name }}
                    {% endif %}
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="5" class="empty-state">
                    <p>No hay movimientos que vincular</p>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">Guardar vinculaciones</button>
        <a class="btn btn-secondary" href="{% url 'goal_list' %}">Volver</a>
    </div>
</form>

<nav class="pagination" aria-label="Paginación de movimientos">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; Primero</a>
            <a href="?page={{ page_obj.previous_page_number }}">Anterior</a>
        {% endif %}

        <span>Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}</span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">Siguiente</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">Último &raquo;</a>
        {% endif %}
    </span>
</nav>

{% endblock %}