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

{% block title %}{{ 'Edit' if is_edit else 'Add' }} {{ singular }} · Money Tracker{% endblock %}

{% block content %}
<div class="mx-auto max-w-2xl space-y-6">
    <header class="border-b border-line pb-5">
        <a class="text-sm font-medium text-forest hover:text-forest-bright"
            href="{{ url_for('web_references.list_page', kind=kind) }}">{{ kind|title }}</a>
        <h1 class="mt-2 text-2xl font-semibold text-ink">{{ 'Edit' if is_edit else 'Add' }} {{ singular }}</h1>
    </header>

    {% if error %}<p class="rounded-md bg-coral-pale px-3 py-2 text-sm text-coral" role="alert">{{ error }}</p>{% endif
    %}

    <form class="space-y-5" method="post">
        <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
        <div>
            <label class="mb-1 block text-sm font-medium" for="name">Name</label>
            <input autocomplete="off" class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="name"
                maxlength="200" name="name" required value="{{ values.get('name', '') }}">
        </div>

        {% if kind == "accounts" %}
        <div>
            <label class="mb-1 block text-sm font-medium" for="account-type">Account type</label>
            <select class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="account-type"
                name="account_type" required>
                {% for account_type in account_types %}
                <option value="{{ account_type }}" {% if values.get('account_type')==account_type %}selected{% endif %}>
                    {{ account_type|replace("_", " ")|title }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label class="mb-1 block text-sm font-medium" for="opening-balance">Opening balance</label>
            <input class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm font-mono"
                id="opening-balance" inputmode="decimal" name="opening_balance" required type="text"
                value="{{ values.get('opening_balance', '0.00') }}">
        </div>
        {% elif kind == "categories" %}
        <div>
            <label class="mb-1 block text-sm font-medium" for="category-type">Category type</label>
            <select class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="category-type"
                name="category_type" required>
                {% for category_type in category_types %}
                <option value="{{ category_type }}" {% if values.get('category_type')==category_type %}selected{% endif
                    %}>{{ category_type|title }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label class="mb-1 block text-sm font-medium" for="parent-id">Parent category</label>
            <select class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="parent-id"
                name="parent_id">
                <option value="" {% if not selected_parent_id %}selected{% endif %}>No parent</option>
                {% if unresolved_parent %}<option value="{{ unresolved_parent }}" selected>{{ unresolved_parent }}
                </option>{% endif %}
                {% for parent in parent_options %}
                <option value="{{ parent.id }}" {% if selected_parent_id==parent.id|string %}selected{% endif %}>{{
                    parent.name }}{% if parent.category_type != values.get('category_type') %} ({{ parent.category_type
                    }}){% endif %}</option>
                {% endfor %}
            </select>
        </div>
        {% else %}
        <div>
            <label class="mb-1 block text-sm font-medium" for="payee-kind">Kind</label>
            <input class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="payee-kind"
                maxlength="40" name="kind" value="{{ values.get('kind', 'other') }}">
        </div>
        {% endif %}

        <div class="flex flex-wrap gap-2 border-t border-line pt-4">
            <button class="rounded-md bg-forest px-4 py-2 text-sm font-semibold text-white hover:bg-forest-bright"
                type="submit">Save {{ singular }}</button>
            <a class="rounded-md border border-line px-4 py-2 text-sm font-medium text-ink hover:bg-page"
                href="{{ url_for('web_references.list_page', kind=kind) }}">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}