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

{% block title %}
    {% if form.instance.pk %}
        Editar gasto
    {% else %}
        Nuevo gasto
    {% endif %}
{% endblock %}
    
{% block content %}
    <h1>
        {% if form.instance.pk %}
            Editar gasto
        {% else %}
            Nuevo gasto
        {% endif %}
    </h1>

    <form method="post">
        {% csrf_token %}
        
        {% for field in form %}
            {% if field.name == "tags" %}
                <div class="form-field">
                    {{ field.label_tag }}
                    <div class="tag-chip-list">
                        {% for checkbox in field %}
                            <label class="tag-chip">
                                {{ checkbox.tag }}
                                <span>{{ checkbox.choice_label }}</span>
                            </label>
                        {% endfor %}
                    </div>
                    {% if field.errors %}
                        <div class="form-errors">{{ field.errors }}</div>
                    {% endif %}
                </div>
            {% else %}
                <p>
                    {{ field.label_tag }} {{ field }}
                    {% if field.errors %}
                        <span class="form-errors">{{ field.errors }}</span>
                    {% endif %}
                </p>
            {% endif %}
        {% endfor %}

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                {% if form.instance.pk %}
                    Guardar gasto
                {% else %}
                    Crear gasto
                {% endif %}
            </button>
            <a class="btn btn-secondary" href="{% url 'expense_list' %}">Volver</a>
        </div>
    </form>
{% endblock %}