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

{% block title %}Kakebo - Dashboard{% endblock %}

{% block content %}
<div class="flex items-center justify-center min-h-[calc(100vh-8rem)] sm:min-h-[calc(100vh-5rem)] px-4">
    <div class="card w-full max-w-md bg-base-100 shadow-xl">
        <div class="card-body">
            <h2 class="card-title text-xl font-bold justify-center mb-4">New expense</h2>

            <form method="post" action="{% url 'expenses:add_expense' %}"
                  data-liveview-function="submit_page_form"
                  data-action="submit->page#run"
                  data-data-url="{% url 'expenses:add_expense' %}">
                {% csrf_token %}

                {% if form.errors %}
                    <div class="alert alert-error mb-4">
                        <div>
                            {% for field, errors in form.errors.items %}
                                {% for error in errors %}
                                    <p>{{ error }}</p>
                                {% endfor %}
                            {% endfor %}
                        </div>
                    </div>
                {% endif %}

                <div class="form-control mb-3">
                    <label class="label" for="id_concept">
                        <span class="label-text">Concept</span>
                    </label>
                    {{ form.concept }}
                </div>

                <div class="form-control mb-3">
                    <label class="label" for="id_amount">
                        <span class="label-text">Amount</span>
                    </label>
                    {{ form.amount }}
                </div>

                <div class="form-control mb-3">
                    <label class="label" for="id_category">
                        <span class="label-text">Category</span>
                    </label>
                    {{ form.category }}
                </div>

                <div id="subcategory-wrapper"></div>

                <button type="submit" class="btn btn-primary w-full mt-3">Add expense</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}