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

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

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

{% block content %}
<div class="space-y-8">
    <section aria-labelledby="dashboard-title" class="flex flex-wrap items-end justify-between gap-3">
        <div class="min-w-0">
            <p class="text-xs font-semibold uppercase text-muted">Household ledger</p>
            <h1 id="dashboard-title" class="mt-1 text-2xl font-semibold text-ink">Dashboard</h1>
            <p class="mt-1 text-sm text-muted">{{ period_summary }} · {% if exclude_transfers %}Transfers excluded{% else
                %}Transfers included{% endif %}</p>
        </div>
        <details class="relative min-w-0" data-filter-modal {% if filter_error %}open{% endif %}>
            <summary
                class="relative z-50 cursor-pointer rounded-md border border-line bg-paper px-3 py-2 text-sm font-semibold text-forest hover:bg-page"
                data-filter-trigger>Filters</summary>
            <div class="fixed inset-0 z-40 flex items-center justify-center p-4">
                <div class="absolute inset-0 bg-ink/30" data-filter-backdrop></div>
                <div class="relative w-full max-w-3xl rounded-lg border border-line bg-paper p-5 shadow-panel"
                    data-filter-modal-panel>
                    {% if filter_error %}
                    <p class="mb-3 rounded-md bg-coral-pale px-3 py-2 text-sm text-coral" role="alert">{{ filter_error }}
                    </p>
                    {% endif %}
                    <form action="/" class="grid min-w-0 gap-3 sm:grid-cols-2 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="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 == '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
                                        =="24" %}checked{% endif %}>
                                    24th
                                </label>
                                <label
                                    class="flex flex-1 cursor-pointer items-center justify-center rounded text-sm {% if payday_day == '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
                                        =="25" %}checked{% endif %}>
                                    25th
                                </label>
                            </div>
                        </fieldset>
                        <fieldset class="min-w-0 sm:col-span-2 xl: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">Start date</label>
                                    <input class="w-full min-w-0 rounded-md border border-line bg-paper px-2 py-2 text-sm"
                                        id="start-date" 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">End date</label>
                                    <input class="w-full min-w-0 rounded-md border border-line bg-paper px-2 py-2 text-sm"
                                        id="end-date" name="end_date" type="date" value="{{ end_date_value }}">
                                </div>
                            </div>
                        </fieldset>
                        <div class="flex min-w-0 items-center gap-2 sm:col-span-2 xl:col-span-3">
                            <input name="exclude_transfers" type="hidden" value="0">
                            <input class="size-4 accent-forest" id="exclude-transfers" name="exclude_transfers"
                                type="checkbox" value="1" {% if exclude_transfers %}checked{% endif %}>
                            <label class="min-w-0 text-sm text-ink" for="exclude-transfers">Exclude transfers from
                                account activity</label>
                        </div>
                        <button
                            class="min-h-10 rounded-md bg-forest px-4 py-2 text-sm font-semibold text-white hover:bg-forest-bright sm:col-span-2 xl:col-span-3 xl:justify-self-end"
                            type="submit">Apply filters</button>
                    </form>
                </div>
            </div>
        </details>
    </section>

    <section aria-label="Selected period totals" class="grid gap-3 sm:grid-cols-2">
        <article class="rounded-lg border border-line bg-paper p-4 shadow-panel sm:p-5">
            <h2 class="text-sm font-medium text-muted">Period income</h2>
            <p class="mt-2 font-mono text-2xl font-medium text-forest">{% if currency_code %}{{ currency_code }} {%
                endif %}{{ totals.income_minor|dashboard_money(currency_code) }}</p>
            <p class="mt-1 text-xs text-muted">{{ window.start_date.strftime("%b %d") }} to {{
                window.end_date.strftime("%b %d") }}</p>
        </article>
        <article class="rounded-lg border border-line bg-paper p-4 shadow-panel sm:p-5">
            <h2 class="text-sm font-medium text-muted">Period spending</h2>
            <p class="mt-2 font-mono text-2xl font-medium text-coral">{% if currency_code %}{{ currency_code }} {% endif
                %}{{ totals.expense_minor|dashboard_money(currency_code) }}</p>
            <p class="mt-1 text-xs text-muted">Transfers are not spending</p>
        </article>
    </section>

    {% include "web/components/cashflow_graph.html" %}

    <div class="grid min-w-0 gap-8 xl:grid-cols-2">
        <section aria-labelledby="category-title" class="min-w-0 border-t border-line pt-5">
            <div class="mb-2 flex items-baseline justify-between gap-3">
                <h2 id="category-title" class="text-lg font-semibold">Category totals</h2>
                <span class="text-xs text-muted">Selected period</span>
            </div>
            {% include "web/components/category_rows.html" %}
        </section>
        <section aria-labelledby="account-title" class="min-w-0 border-t border-line pt-5">
            <div class="mb-2 flex items-baseline justify-between gap-3">
                <h2 id="account-title" class="text-lg font-semibold">Account totals</h2>
                <span class="text-xs text-muted">Selected-period activity</span>
            </div>
            {% include "web/components/account_rows.html" %}
        </section>
    </div>

    <div class="grid min-w-0 gap-8 xl:grid-cols-2">
        <section aria-labelledby="budget-title" class="min-w-0 border-t border-line pt-5">
            <div class="mb-3 flex flex-wrap items-baseline justify-between gap-2">
                <h2 id="budget-title" class="text-lg font-semibold">Budget use</h2>
                <span class="text-xs font-medium text-muted">Budget month: {{ selected_month_label }}</span>
            </div>
            {% if budget_rows %}
            <ul class="divide-y divide-line">
                {% for budget in budget_rows %}
                <li class="py-3">
                    <div class="flex min-w-0 items-baseline justify-between gap-3">
                        <div class="min-w-0">
                            <h3 class="break-words text-sm font-semibold">{{ budget.name }}</h3>
                            <p class="break-words text-xs text-muted">{{ budget.category_name }} · {{ budget.scope_label
                                }}</p>
                        </div>
                        <p class="whitespace-nowrap text-sm font-medium">{% if currency_code %}{{ currency_code }} {%
                            endif %}{{ budget.actual_minor|dashboard_money(currency_code) }} / {{
                            budget.allocated_minor|dashboard_money(currency_code) }}</p>
                    </div>
                    <div aria-label="{{ budget.progress_percent }} percent of budget used"
                        class="mt-2 h-2 overflow-hidden rounded-full bg-mint" role="img">
                        <div class="h-full rounded-full bg-forest" style="width: {{ budget.progress_percent }}%"></div>
                    </div>
                    <p class="mt-1 text-xs text-muted">{% if currency_code %}{{ currency_code }} {% endif %}{{
                        budget.remaining_minor|dashboard_money(currency_code) }} remaining</p>
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <p class="py-4 text-sm text-muted">No active budgets for this calendar month.</p>
            {% endif %}
        </section>

        <section aria-labelledby="trend-title" class="min-w-0 border-t border-line pt-5">
            <div class="mb-3 flex flex-wrap items-baseline justify-between gap-2">
                <h2 id="trend-title" class="text-lg font-semibold">Cash flow</h2>
                <span class="text-xs text-muted">Six calendar months</span>
            </div>
            <ul class="space-y-3">
                {% for month in trend %}
                <li class="grid min-w-0 grid-cols-[3.5rem_minmax(0,1fr)_auto] items-center gap-3">
                    <span class="text-xs font-medium text-muted">{{ month.month_start.strftime("%b") }}</span>
                    <div aria-hidden="true" class="space-y-1">
                        <div class="h-2 rounded-full bg-mint">
                            <div class="h-2 rounded-full bg-forest" style="width: {{ month.income_width }}%"></div>
                        </div>
                        <div class="h-2 rounded-full bg-coral-pale">
                            <div class="h-2 rounded-full bg-coral" style="width: {{ month.expense_width }}%"></div>
                        </div>
                    </div>
                    <div class="whitespace-nowrap text-right font-mono text-[11px] leading-4">
                        <p class="text-forest">{{ month.income_minor|dashboard_money(currency_code) }}</p>
                        <p class="text-coral">{{ month.expense_minor|dashboard_money(currency_code) }}</p>
                    </div>
                </li>
                {% endfor %}
            </ul>
            <div class="mt-3 flex gap-4 text-xs text-muted"><span>Income</span><span>Spending</span></div>
        </section>
    </div>
</div>
{% endblock %}