{% extends "expenses/base.html" %}
{% block title %}
    {{ title }}
{% endblock %}

{% block content %}
    <h1>
        {{ title }}
    </h1>

    <details class="info-panel">
        <summary>¿Qué tipo de objetivo necesito?</summary>

        <div class="info-panel-content">
            <h2>Pago / deuda</h2>
            <p>
                Para algo que quieres terminar de pagar: devolver un préstamo,
                costear un viaje a plazos, reunir el importe de una compra grande.
                El progreso es la suma de los gastos de la categoría elegida desde
                la fecha de inicio, y llegar al 100% es haberlo conseguido.
            </p>

            <h2>Presupuesto</h2>
            <p>
                Para ponerte un límite de gasto que no quieres superar. El progreso
                se reinicia cada mes o cada año, según el periodo que elijas.
                Aquí acercarse al 100% es un aviso, no un logro: la barra pasa a
                naranja al llegar al 80% y a rojo si te pasas del límite.
            </p>

            <h2>Ahorro</h2>
            <p>
                Para acumular dinero hasta una cantidad. Se mide con el saldo de la
                cuenta que asocies, así que necesita una cuenta en vez de una
                categoría.
            </p>

            <h2>Los demás campos</h2>
            <ul>
                <li>
                    <strong>Category</strong> — solo para pago y presupuesto: es la
                    categoría cuyos gastos se cuentan.
                </li>
                <li>
                    <strong>Include subcategories</strong> — si se marca, también
                    cuentan los gastos de las categorías hijas.
                </li>
                <li>
                    <strong>Account</strong> — solo para ahorro: la cuenta cuyo saldo
                    mide el progreso.
                </li>
                <li>
                    <strong>Start date</strong> — desde cuándo se cuentan los gastos
                    en un pago. En un presupuesto no se usa: manda el reinicio del
                    periodo.
                </li>
                <li>
                    <strong>Period</strong> — solo para presupuesto: cada cuánto
                    vuelve el progreso a cero.
                </li>
                <li>
                    <strong>Show on home</strong> — si el objetivo aparece en la
                    pantalla de inicio.
                </li>
            </ul>
        </div>
    </details>

    <form method="post" class="app-form">
        {% csrf_token %}
        {% include "expenses/_form_fields.html" %}
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                Guardar
            </button>
            <a class="btn btn-secondary" href="{% url 'goal_list' %}">Volver</a>
        </div>
    </form>
{% endblock %}