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

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

{% block content %}
<div class="mx-auto max-w-3xl 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_transactions.list_page') }}">Transactions</a>
        <h1 class="mt-2 text-2xl font-semibold text-ink">{{ 'Edit transaction' if is_edit else 'Add transaction' }}</h1>
    </header>

    {% if error %}<p class="rounded-md bg-coral-pale px-3 py-2 text-sm text-coral" role="alert">{{ error }}</p>{% endif
    %}
    {% if event %}{% include "web/transactions/detail.html" %}{% endif %}

    <form class="space-y-5" method="post">
        <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
        {% if not is_edit %}
        <div>
            <label class="mb-1 block text-sm font-medium" for="transaction-type">Type</label>
            <select class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="transaction-type"
                name="type" required>
                {% for transaction_type in transaction_types %}
                <option value="{{ transaction_type }}" {% if values.get('type')==transaction_type %}selected{% endif %}>
                    {{ transaction_type|title }}</option>
                {% endfor %}
            </select>
        </div>
        {% endif %}
        <div>
            <label class="mb-1 block text-sm font-medium" for="occurred-at">Date</label>
            <input class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="occurred-at"
                name="occurred_at" required type="date" value="{{ values.get('occurred_at', '') }}">
        </div>
        {% if not is_edit %}
        <div>
            <label class="mb-1 block text-sm font-medium" for="amount">Amount</label>
            <input class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm font-mono" id="amount"
                inputmode="decimal" name="amount" required type="text" value="{{ values.get('amount', '') }}">
        </div>
        <div>
            <label class="mb-1 block text-sm font-medium" for="account-id">Account for income or expense</label>
            <select class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="account-id"
                name="account_id">
                <option value="">Select account</option>
                {% if values.get('account_id') and values.get('account_id') in unknown_account_ids %}<option
                    value="{{ values.get('account_id') }}" selected>Unknown account {{ values.get('account_id') }}
                </option>{% endif %}
                {% for account in account_options %}
                <option value="{{ account.id }}" {% if values.get('account_id')==account.id|string %}selected{% endif
                    %}>{{ account.name }}{% if not account.is_active %} (Archived){% endif %}</option>
                {% endfor %}
            </select>
        </div>
        <fieldset class="grid gap-3 rounded-md border border-line p-3 sm:grid-cols-2">
            <legend class="px-1 text-sm font-medium">Transfer accounts</legend>
            <div>
                <label class="mb-1 block text-xs font-medium text-muted" for="source-account-id">From</label>
                <select class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="source-account-id"
                    name="source_account_id">
                    <option value="">Select source</option>
                    {% if values.get('source_account_id') and values.get('source_account_id') in unknown_account_ids %}
                    <option value="{{ values.get('source_account_id') }}" selected>Unknown account {{
                        values.get('source_account_id') }}</option>{% endif %}
                    {% for account in account_options %}
                    <option value="{{ account.id }}" {% if values.get('source_account_id')==account.id|string
                        %}selected{% endif %}>{{ account.name }}{% if not account.is_active %} (Archived){% endif %}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="mb-1 block text-xs font-medium text-muted" for="destination-account-id">To</label>
                <select class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm"
                    id="destination-account-id" name="destination_account_id">
                    <option value="">Select destination</option>
                    {% if values.get('destination_account_id') and values.get('destination_account_id') in
                    unknown_account_ids %}<option value="{{ values.get('destination_account_id') }}" selected>Unknown
                        account {{ values.get('destination_account_id') }}</option>{% endif %}
                    {% for account in account_options %}
                    <option value="{{ account.id }}" {% if values.get('destination_account_id')==account.id|string
                        %}selected{% endif %}>{{ account.name }}{% if not account.is_active %} (Archived){% endif %}
                    </option>
                    {% endfor %}
                </select>
            </div>
        </fieldset>
        {% endif %}

        {% if event_type != "transfer" %}
        <div>
            <label class="mb-1 block text-sm font-medium" for="payee-id">Payee</label>
            <select class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="payee-id"
                name="payee_id">
                <option value="" {% if not values.get('payee_id') %}selected{% endif %}>No payee</option>
                {% if values.get('payee_id') and values.get('payee_id') in unknown_payee_ids %}<option
                    value="{{ values.get('payee_id') }}" selected>Unknown payee {{ values.get('payee_id') }}</option>{%
                endif %}
                {% for payee in payee_options %}
                <option value="{{ payee.id }}" {% if values.get('payee_id')==payee.id|string %}selected{% endif %}>{{
                    payee.name }}{% if not payee.is_active %} (Archived){% endif %}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label class="mb-1 block text-sm font-medium" for="category-id">Category</label>
            <select class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="category-id"
                name="category_id">
                <option value="" {% if not values.get('category_id') %}selected{% endif %}>No category</option>
                {% if values.get('category_id') and values.get('category_id') in unknown_category_ids %}<option
                    value="{{ values.get('category_id') }}" selected>Unknown category {{ values.get('category_id') }}
                </option>{% endif %}
                {% for category in category_options %}
                <option value="{{ category.id }}" {% if values.get('category_id')==category.id|string %}selected{% endif
                    %}>{{ category.name }}{% if not category.is_active %} (Archived){% endif %}{% if
                    category.category_type != event_type %} ({{ category.category_type }}){% endif %}</option>
                {% endfor %}
            </select>
        </div>
        {% endif %}

        <div>
            <label class="mb-1 block text-sm font-medium" for="note">Note</label>
            <textarea class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="note" maxlength="1000"
                name="note" rows="3">{{ values.get('note', '') }}</textarea>
        </div>
        <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 transaction</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_transactions.list_page') }}">Cancel</a>
            {% if is_edit %}<a
                class="rounded-md border border-line px-4 py-2 text-sm font-medium text-coral hover:bg-coral-pale"
                href="{{ url_for('web_transactions.reverse', event_id=event.event_id) }}">Reverse event</a>{% endif %}
        </div>
    </form>
</div>
{% endblock %}