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

{% block title %}Transactions · Money Tracker{% endblock %}

{% block scripts %}<script defer src="{{ url_for('static', filename='js/filters.js') }}"></script>{% endblock %}

{% block content %}
<div class="space-y-6">
    <header class="flex flex-wrap items-end justify-between gap-3 border-b border-line pb-5">
        <div>
            <p class="text-xs font-semibold uppercase text-muted">Household ledger</p>
            <h1 class="mt-1 text-2xl font-semibold text-ink">Transactions</h1>
            <p class="mt-1 text-sm text-muted">{{ total }} events</p>
        </div>
        <a class="rounded-md bg-forest px-3 py-2 text-sm font-semibold text-white hover:bg-forest-bright"
            href="{{ url_for('web_transactions.create') }}">Add transaction</a>
    </header>

    {% if filter_error %}
    <p class="border-l-4 border-coral bg-coral/5 px-4 py-3 text-sm text-coral" role="alert">{{ filter_error }}</p>
    {% endif %}

    <details class="min-w-0 border-b border-line pb-5" {% if filter_error %}open{% endif %}>
        <summary class="cursor-pointer text-sm font-semibold text-forest">{{ filter_summary }}</summary>
        <form action="{{ url_for('web_transactions.list_page') }}"
            class="mt-4 grid min-w-0 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6" data-period-form method="get">
            <div class="min-w-0">
                <label class="mb-1 block text-xs font-semibold text-muted" for="period-mode">Period</label>
                <select class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="period-mode"
                    name="period_mode">
                    <option value="all" {% if period_mode=="all" %}selected{% endif %}>All dates</option>
                    <option value="payday" {% if period_mode=="payday" %}selected{% endif %}>Payday range</option>
                    <option value="calendar" {% if period_mode=="calendar" %}selected{% endif %}>Calendar month</option>
                    <option value="custom" {% if period_mode=="custom" %}selected{% endif %}>Custom dates</option>
                </select>
            </div>
            <fieldset class="min-w-0" data-period-mode-field="calendar" {% if period_mode != "calendar" %}hidden disabled{% endif %}>
                <label class="mb-1 block text-xs font-semibold text-muted" for="month">Calendar month</label>
                <input class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="month" name="month"
                    type="month" value="{{ month_value }}">
            </fieldset>
            <fieldset class="min-w-0" data-period-mode-field="payday" {% if period_mode != "payday" %}hidden disabled{% endif %}>
                <legend class="mb-1 block text-xs font-semibold text-muted">Payday day</legend>
                <div class="flex h-10 rounded-md border border-line bg-paper p-1">
                    <label
                        class="flex flex-1 cursor-pointer items-center justify-center rounded text-sm {% if payday_day_value == '24' %}bg-mint font-semibold text-forest{% else %}text-muted{% endif %}">
                        <input class="sr-only" name="payday_day" type="radio" value="24" {% if payday_day_value=="24"
                            %}checked{% endif %}>
                        24th
                    </label>
                    <label
                        class="flex flex-1 cursor-pointer items-center justify-center rounded text-sm {% if payday_day_value == '25' %}bg-mint font-semibold text-forest{% else %}text-muted{% endif %}">
                        <input class="sr-only" name="payday_day" type="radio" value="25" {% if payday_day_value=="25"
                            %}checked{% endif %}>
                        25th
                    </label>
                </div>
            </fieldset>
            <fieldset class="min-w-0 sm:col-span-2" data-period-mode-field="custom" {% if period_mode != "custom" %}hidden disabled{% endif %}>
                <div class="grid min-w-0 grid-cols-2 gap-2">
                    <div class="min-w-0">
                        <label class="mb-1 block text-xs font-semibold text-muted" for="start-date-filter">From</label>
                        <input class="w-full min-w-0 rounded-md border border-line bg-paper px-2 py-2 text-sm"
                            id="start-date-filter" name="start_date" type="date" value="{{ start_date_value }}">
                    </div>
                    <div class="min-w-0">
                        <label class="mb-1 block text-xs font-semibold text-muted" for="end-date-filter">Through</label>
                        <input class="w-full min-w-0 rounded-md border border-line bg-paper px-2 py-2 text-sm"
                            id="end-date-filter" name="end_date" type="date" value="{{ end_date_value }}">
                    </div>
                </div>
            </fieldset>
            <div class="min-w-0">
                <label class="mb-1 block text-xs font-semibold text-muted" for="account-filter">Account</label>
                <select class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="account-filter"
                    name="account_id">
                    <option value="">All accounts</option>
                    {% for account in account_options %}
                    <option value="{{ account.id }}" {% if selected_account_id==account.id|string %}selected{% endif %}>{{
                        account.name }}{% if not account.is_active %} (Archived){% endif %}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="min-w-0">
                <label class="mb-1 block text-xs font-semibold text-muted" for="category-filter">Category</label>
                <select class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="category-filter"
                    name="category_id">
                    <option value="">All categories</option>
                    {% for category in category_options %}
                    <option value="{{ category.id }}" {% if selected_category_id==category.id|string %}selected{% endif %}>
                        {{ category.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="min-w-0">
                <label class="mb-1 block text-xs font-semibold text-muted" for="type-filter">Type</label>
                <select class="w-full rounded-md border border-line bg-paper px-3 py-2 text-sm" id="type-filter"
                    name="type">
                    <option value="">All types</option>
                    {% for transaction_type in transaction_types %}
                    <option value="{{ transaction_type }}" {% if selected_type==transaction_type %}selected{% endif %}>{{
                        transaction_type|title }}</option>
                    {% endfor %}
                </select>
            </div>
            <button
                class="min-h-10 self-end rounded-md border border-line px-4 py-2 text-sm font-semibold text-ink hover:bg-page"
                type="submit">Filter</button>
        </form>
    </details>

    {% if events %}
    <ul class="divide-y divide-line">
        {% for event in events %}
        <li class="grid min-w-0 gap-3 py-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center"
            data-event-id="{{ event.event_id }}">
            <div class="min-w-0">
                <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
                    <h2 class="break-words text-sm font-semibold">{{ event.payee_name or event.account_label }}</h2>
                    <span class="text-xs text-muted">{{ event.event_type|title }}</span>
                    {% if event.is_reversed %}<span class="text-xs font-medium text-coral">Reversed</span>{% endif %}
                    {% if event.reverses_event_id %}<span class="text-xs text-muted">Reversal</span>{% endif %}
                </div>
                <p class="mt-1 break-words text-xs text-muted">{{ event.occurred_at.strftime("%b %d, %Y") }} · {{
                    event.account_label }}{% if event.category_name %} · {{ event.category_name }}{% endif %}{% if
                    event.note %} · {{ event.note }}{% endif %}</p>
            </div>
            <div class="flex flex-wrap items-center gap-3 sm:justify-end">
                <span
                    class="whitespace-nowrap font-mono text-sm font-semibold {% if event.event_type == 'transfer' %}text-muted{% elif event.is_positive_amount %}text-forest{% else %}text-coral{% endif %}">{%
                    if event.event_type != 'transfer' %}{{ '+' if event.is_positive_amount else '-' }}{% endif %}{{
                    event.amount_minor|money }}</span>
                <details class="relative">
                    <summary aria-label="Transaction actions"
                        class="flex size-9 cursor-pointer list-none items-center justify-center rounded-md border border-line text-lg font-semibold text-ink hover:bg-page focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-forest"
                        title="Actions"><span aria-hidden="true">&hellip;</span></summary>
                    <div
                        class="absolute right-0 top-full z-10 mt-1 grid min-w-28 gap-1 rounded-md border border-line bg-paper p-1 shadow-panel">
                        <a class="rounded px-3 py-2 text-sm font-medium text-ink hover:bg-page"
                            href="{{ url_for('web_transactions.edit', event_id=event.event_id) }}">Edit</a>
                        <a class="rounded px-3 py-2 text-sm font-medium text-muted hover:bg-page"
                            href="{{ url_for('web_transactions.reverse', event_id=event.event_id) }}">Reverse</a>
                    </div>
                </details>
            </div>
        </li>
        {% endfor %}
    </ul>
    {% else %}
    <p class="border-y border-line py-8 text-center text-sm text-muted">No transactions found.</p>
    {% endif %}

    <nav aria-label="Transaction pages" class="flex items-center justify-between border-t border-line pt-4 text-sm">
        {% if page > 1 %}
        <a class="font-medium text-forest hover:text-forest-bright"
            href="{{ url_for('web_transactions.list_page', page=page - 1, account_id=selected_account_id or none, category_id=selected_category_id or none, start_date=start_date_value or none, end_date=end_date_value or none, type=selected_type or none, period_mode=period_mode, month=(month_value if period_mode in ('payday', 'calendar') else none), payday_day=(payday_day_value if period_mode == 'payday' else none)) }}">Previous</a>
        {% else %}<span class="text-muted">Previous</span>{% endif %}
        <span class="text-muted">Page {{ page }} of {{ page_count }}</span>
        {% if page < page_count %} <a class="font-medium text-forest hover:text-forest-bright"
            href="{{ url_for('web_transactions.list_page', page=page + 1, account_id=selected_account_id or none, category_id=selected_category_id or none, start_date=start_date_value or none, end_date=end_date_value or none, type=selected_type or none, period_mode=period_mode, month=(month_value if period_mode in ('payday', 'calendar') else none), payday_day=(payday_day_value if period_mode == 'payday' else none)) }}">
            Next</a>
            {% else %}<span class="text-muted">Next</span>{% endif %}
    </nav>
</div>
{% endblock %}