{% 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>
            {{ goal.progress }} / {{ goal.target_amount }}

            <div style="background:#eee; width:200px;">
                <div style="background:#4caf50; width:{{ goal.percentage|unlocalize }}%; height:10px;"></div>
            </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 %}