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

{% block title %}Reverse 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.edit', event_id=event.event_id) }}">Transaction</a>
        <h1 class="mt-2 text-2xl font-semibold text-ink">Confirm reversal</h1>
        <p class="mt-1 text-sm text-muted">The original remains in the ledger; a matching event will be added.</p>
    </header>

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

    <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="occurred-at">Reversal 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>
        <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-coral px-4 py-2 text-sm font-semibold text-white hover:brightness-95"
                type="submit">Confirm reversal</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.edit', event_id=event.event_id) }}">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}