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

{% block page_title %}PayPal Integration{% endblock %}

{% block admin_content %}
<div class="mx-auto w-full max-w-7xl space-y-5 p-4 sm:p-6">
    <header class="space-y-1">
        <h1 class="text-2xl font-bold text-foreground">PayPal payments</h1>
        <p class="text-sm text-muted">Review transactions and reconcile payments with PayPal.</p>
    </header>
    <div class="overflow-x-auto rounded-xl border border-divider bg-surface px-4">
        <div class="blocks-filter-tabs" role="group" aria-label="Filter payments">
            <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>
    </div>

    {{ crud::shell_open(config_url="/plugins/paypal-payment/assets/admin/payments_list.json", mount_id="paypal-payments-list", context_selector="#paypal-config") }}

    <table>
        <thead></thead>
        <tbody>
            <tr><td colspan="8" class="crud-empty-state">Loading payments…</td></tr>
        </tbody>
    </table>

    {{ crud::shell_close() }}

    <div id="paypal-config"
         data-currency-symbol="{{ settings.currency_symbol }}"
         hidden></div>
</div>
{% endblock %}