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

{% block title %}{{ kind|title }} · Money Tracker{% 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">{{ kind|title }}</h1>
            <p class="mt-1 text-sm text-muted">{% if include_archived %}Active and archived records{% else %}Active records{% endif %}</p>
        </div>
        <div class="flex flex-wrap items-center gap-2">
            <form class="flex items-center gap-2" method="get"
                action="{{ url_for('web_references.list_page', kind=kind) }}">
                <label class="flex items-center gap-2 text-sm font-medium text-ink">
                    <input name="show_archived" type="checkbox" value="1" {% if include_archived %}checked{% endif %}>
                    Show archived
                </label>
                <button class="rounded-md border border-line px-3 py-2 text-sm font-medium text-ink hover:bg-page"
                    type="submit">Apply</button>
            </form>
            <a class="rounded-md bg-forest px-3 py-2 text-sm font-semibold text-white hover:bg-forest-bright"
                href="{{ url_for('web_references.create', kind=kind) }}">Add {{ singular }}</a>
        </div>
    </header>

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

    {% if rows %}
    <ul class="divide-y divide-line">
        {% for record, depth in rows %}
        <li class="grid min-w-0 gap-3 py-4 {% if depth %}pl-6{% endif %}{% if kind == 'accounts' %} sm:grid-cols-[minmax(0,1fr)_auto_auto]{% else %} sm:grid-cols-[minmax(0,1fr)_auto]{% endif %} sm:items-center"{% if depth %} data-category-depth="{{ depth }}"{% endif %}>
            <div class="min-w-0">
                <h2 class="break-words text-sm font-semibold text-ink">
                    {% if kind == "accounts" %}<a class="hover:underline"
                        href="{{ url_for('web_transactions.list_page', account_id=record.id, start_date=drill_down_start.isoformat(), end_date=drill_down_end.isoformat()) }}">{{ record.name }}</a>{% else %}{{ record.name }}{% endif %}
                </h2>
                <p class="mt-1 text-xs text-muted">
                    {% if kind == "accounts" %}{{ record.account_type|replace("_", " ")|title }}
                    {% elif kind == "categories" %}{{ record.category_type|title }}
                    {% else %}{{ record.kind|title }}{% endif %}
                    {% if not record.is_active %} · Archived{% endif %}
                </p>
            </div>
            {% if kind == "accounts" %}
            <p class="whitespace-nowrap font-mono text-sm font-semibold text-ink">{% if currency_code %}{{ currency_code }} {% endif %}{{ balances[record.id]|dashboard_money(currency_code) }}</p>
            {% endif %}
            <div class="flex flex-wrap items-center gap-2">
                <a class="rounded-md border border-line px-3 py-2 text-sm font-medium text-ink hover:bg-page"
                    href="{{ url_for('web_references.edit', kind=kind, record_id=record.id) }}">Edit</a>
                {% if not record.is_active %}
                <form action="{{ url_for('web_references.restore', kind=kind, record_id=record.id) }}" method="post">
                    <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
                    <button
                        class="rounded-md border border-forest px-3 py-2 text-sm font-semibold text-forest hover:bg-mint"
                        type="submit">Restore</button>
                </form>
                {% else %}
                <form action="{{ url_for('web_references.archive', kind=kind, record_id=record.id) }}" method="post">
                    <input name="csrf_token" type="hidden" value="{{ csrf_token() }}">
                    <button class="rounded-md border border-line px-3 py-2 text-sm font-medium text-muted hover:bg-page"
                        type="submit">Archive</button>
                </form>
                {% endif %}
            </div>
        </li>
        {% endfor %}
    </ul>
    {% if kind == "accounts" %}
    <p class="flex min-w-0 justify-between gap-3 border-t border-line pt-3 text-sm font-semibold text-ink">
        <span>{% if include_archived %}Total (active and archived accounts){% else %}Total (active accounts){% endif %}</span>
        <span class="whitespace-nowrap font-mono">{% if currency_code %}{{ currency_code }} {% endif %}{{ listed_total_minor|dashboard_money(currency_code) }}</span>
    </p>
    {% endif %}
    {% else %}
    <p class="border-y border-line py-8 text-center text-sm text-muted">No {{ kind }} found.</p>
    {% endif %}
</div>
{% endblock %}