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

{% load l10n %}

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

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

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

<table>
    <tr>
        <th>Nombre</th>
        <th>Progreso</th>
        <th></th>
    </tr>

    {% for goal in goals %}
    <tr>
        <td>{{ goal.name }}</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
                    {% if goal.percentage < 50 %} low
                    {% elif goal.percentage < 80 %} medium
                    {% else %} high
                    {% endif %}"
                    style="width: {{ goal.percentage|unlocalize }}%"></div>
                </div>
                <span class="progress-label">
                    {{ goal.percentage|floatformat:1}}%
                </span>
            </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>

{% endblock %}