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

{% load l10n %}

{% block title %}
    Objetivos
{% endblock %}

{% block content %}
<h2>Objetivos</h2>

<a class="btn btn-primary" href="{% url 'goal_create' %}">➕ Nuevo objetivo</a>

<div class="table-wrap">
<table>
    <tr>
        <th>Nombre</th>
        <th>Tipo</th>
        <th>Progreso</th>
        <th></th>
    </tr>

    {% for goal in goals %}
    <tr>
        <td>{{ goal.name }}</td>
        <td>
            {{ goal.get_kind_display }}
            {% if goal.kind == "budget" %}
                <small>({{ goal.get_period_display|lower }})</small>
            {% endif %}
        </td>
        <td>
            <div class="progress-container">
                <span class="progress-label">
                    {{ goal.progress|floatformat:1 }}€ / {{ goal.target_amount|floatformat:1 }}€
                </span>
                <div class="progress-bar">
                    <div class="progress-fill {{ goal.progress_state }}"
                        style="width: {{ goal.bar_width|unlocalize }}%"></div>
                </div>
                <span class="progress-label">
                    {{ goal.percentage|floatformat:1 }}%
                </span>
                {% if goal.is_exceeded %}
                    <span class="badge badge-inactive">Excedido</span>
                {% endif %}
            </div>
        </td>

        <td>
            <a href="{% url 'goal_edit' goal.id %}">Editar</a>
            <a href="{% url 'goal_delete' goal.id %}" class="danger">Eliminar</a>
        </td>
    </tr>
    {% endfor %}
</table>
</div>

{% endblock %}