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


{% block title %}
    Gastos
{% endblock %}
    
{% block content %}
    <h1>Mis gastos</h1>

    <form method="get" class="filters">
        <div class="filters-main">

            <select name="year">
                <option value="">Año</option>
                    {% for y in year_list %}
                    <option value="{{ y }}" 
                    {% if selected_year == y %}selected{% endif %}
                    >
                    {{ y }}
                </option>
                {% endfor %}
            </select>
            
            <select name="month">
                <option value="">Mes</option>
                    {% for m in months %}
                    <option value="{{ m }}" 
                    {% if selected_month == m %}selected{% endif %}
                    >
                    {{ m }}
                </option>
                {% endfor %}
            </select>
            
            <select name="account">
                <option value="">Cuenta</option>
                {% for acc in accounts %}
                    <option value="{{ acc.id }}"
                        {% if selected_account == acc.id %}selected{% endif %}
                    >
                        {{ acc.name }}    
                </option>
                {% endfor %}
            </select>

            <button type="submit">Filtrar</button>
            <a href="{% url 'expense_list' %}" class="btn-secondary">Limpiar</a>
        </div>

        <br>

        <details class="filters-advanced"
            {% if advanced_filters_open %}
                open
            {% endif %}
        >
            <summary>Filtros avanzados</summary>

            <div class="advanced-content">
                <label>
                    Categoría:
                    <select name="category" onchange="this.form.submit()">
                        <option value="">Todas</option>
                        {% for cat in categories %}
                            <option value="{{ cat.id }}"
                                {% if selected_category == cat.id %}selected{% endif%}
                            >
                                {{ cat.name }}
                            </option>
                        {% endfor %}
                    </select>
                </label>
        
                <div class="tags-filters">
                    <span>Tags:</span>
                    <div class="active-tags">
                        {% for tag in tags_with_state %}
                        <a href="?{{ tag.query }}"
                            class="tag {% if tag.active %}active{% endif %}">
                            {{ tag.name }} {% if tag.active %} ✕{% endif %}
                        </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </details>
    </form>

    <br>

    <a class="btn" href="{% url 'expense_create' %}">➕ Nuevo gasto</a>

    <br>
    <br>

    <section>
        <strong>Total:</strong> {{ kpi_total|floatformat:2 }}€ |
        <strong>Gastos:</strong> {{ kpi_count }} |
        <strong>Categorías:</strong> {{ kpi_categories }}
    </section>

    <table>
        <thead>
            <tr>
                <th>Fecha</th>
                <th>Categoría</th>
                <th>Importe</th>
                <th>Cuenta</th>
                <th>Etiquetas</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for expense in page_obj %}
                <tr>
                    <td>{{ expense.date }}</td>
                    <td>{{ expense.category.name }}</td>
                    <td>{{ expense.amount }}</td>
                    <td>{{ expense.account.name }}</td>
                    <td>
                        {% for tag in expense.tags.all %}
                            <span class="tag">
                                {{ tag.name }}
                            </span>
                        {% empty %}
                            <span>-</span>
                        {% endfor %}
                    </td>
                    <td class="table-actions">
                        {% if expense.category.slug == 'gasolina' %}
                            <a href="{% url 'fuel_edit' expense.id %}">Editar</a>
                        {% else %}
                            <a href="{% url 'expense_edit' expense.id %}">Editar</a>
                        {% endif %}
                        <a href="{% url 'expense_delete' expense.id %}" class="danger">Eliminar</a>
                    </td>
                </tr>
            {% empty %}
                <tr>
                    <td colspan="4"  class="empty-state">
                        <p>No hay gastos</p>
                        <a href="{% url 'expense_create' %}">Añade el primero</a>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    
    <div class="pagination">
        <span class="step-links">            
            {% if page_obj.has_previous %}
                <a href="?page=1{% if query_params %}&{{ query_params }}{% endif %}">&laquo; Primero</a>
                <a href="?page={{ page_obj.previous_page_number }}{% if query_params %}&{{ query_params }}{% endif %}">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 }}{% if query_params %}&{{ query_params }}{% endif %}">Siguiente</a>
                <a href="?page={{ page_obj.paginator.num_pages }}{% if query_params %}&{{ query_params }}{% endif %}">Último &raquo;</a>
            {% endif %}
        </span>
    </div>

{% endblock %}