{% extends "admin_base.html" %}
{% import "macros/admin_crud_list.html" as crud %}

{% block page_title %}Stripe Integration{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-7xl space-y-4 px-4 py-5 text-foreground sm:px-6 sm:py-7">
    <header class="flex flex-col gap-3 rounded-2xl border border-divider bg-surface p-4 shadow-sm sm:flex-row sm:items-center sm:justify-between sm:p-5">
        <div>
            <p class="text-sm font-medium text-muted">Commerce</p>
            <h1 class="mt-1 text-2xl font-bold tracking-tight sm:text-3xl">Stripe payments</h1>
            <p class="mt-1 text-sm text-muted">Review payment activity and reconcile pending transactions.</p>
        </div>
        <a href="/plugins/stripe-payment/new" class="inline-flex min-h-11 items-center justify-center gap-2 rounded-lg bg-primary px-4 py-2 font-semibold text-white shadow-sm transition  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2">
            <i class="fas fa-plus" aria-hidden="true"></i> New payment
        </a>
    </header>

    <nav aria-label="Filter payments" class="overflow-x-auto rounded-xl border border-divider bg-surface px-3 sm:px-5">
        <div class="blocks-filter-tabs" role="group">
            <a href="#all" class="blocks-filter-tab active" data-status="all">All payments</a>
            <a href="#paid" class="blocks-filter-tab" data-status="paid">Paid</a>
            <a href="#pending" class="blocks-filter-tab" data-status="created">Pending</a>
            <a href="#failed" class="blocks-filter-tab" data-status="failed">Failed</a>
        </div>
    </nav>

    <section aria-label="Payment records" class="min-w-0 overflow-hidden rounded-2xl border border-divider bg-surface shadow-sm">
        <div class="overflow-x-auto">
            {{ crud::shell_open(config_url="/plugins/stripe-payment/assets/admin/payments_list.json", mount_id="stripe-payments-list", context_selector="#stripe-config") }}

            <table class="blocks-admin-table min-w-[48rem]">
                <thead></thead>
                <tbody>
                    <tr><td colspan="8" class="p-4 text-muted">Loading payments…</td></tr>
                </tbody>
            </table>

            {{ crud::shell_close() }}
        </div>
    </section>
    <div id="stripe-config"
         data-currency-symbol="{{ settings.currency_symbol }}"
         style="display:none;"></div>
</main>
{% endblock %}