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

{% block title %}
    Categorías
{% endblock %}

{% block content %}

    <h1>Mis categorías</h1>

    <h2>Nueva categoría</h2>
    <form method="post" class="app-form">
        {% csrf_token %}
        {% include "expenses/_form_fields.html" %}
        <button type="submit" class="btn btn-primary">Crear</button>
    </form>

    <hr>

    <h2>Listado</h2>
    <div class="table-wrap">
        <table>
            <thead>
                <tr>
                    <th>Categoría</th>
                    <th>Tipo de gasto</th>
                    <th>Gastos</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for row in category_rows %}
                <tr>
                    <td class="cat-depth-{{ row.depth }}">
                        {{ row.category.name }}
                        {% if row.category.is_system %}
                            <span class="badge badge-neutral">Del sistema</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if row.expense_type_inherited %}
                            <span class="muted">{{ row.expense_type_label }}{% if row.expense_type_label %} (heredado){% endif %}</span>
                        {% else %}
                            {{ row.expense_type_label }}
                        {% endif %}
                    </td>
                    <td>{{ row.category.expense_count }}</td>
                    <td class="table-actions">
                        <a href="{% url 'category_edit' row.category.id %}">Editar</a>
                        {% if not row.category.is_system %}
                            <a href="{% url 'category_delete' row.category.id %}" class="danger">Eliminar</a>
                        {% endif %}
                    </td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="4" class="empty-state">
                        <p>No hay categorías</p>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

{% endblock %}