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

{% block page_title %}Razorpay Integration{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/plugins/razorpay-payment/assets/css/razorpay.ui.css?v={{ asset_version | default(value='1') }}">
{% endblock %}

{% block admin_content %}
<main class="razorpay-admin mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
    <header class="mb-6">
        <p class="text-sm text-muted">Review transactions and reconcile payments with Razorpay.</p>
    </header>
    <div class="mb-5 overflow-x-auto rounded-xl border border-divider bg-surface px-3 sm:px-5">
        <nav class="blocks-filter-tabs" aria-label="Filter payments by status">
            <a href="#all" class="blocks-filter-tab filter-tab active" data-status="all">All payments</a>
            <a href="#paid" class="blocks-filter-tab filter-tab" data-status="paid">Paid</a>
            <a href="#pending" class="blocks-filter-tab filter-tab" data-status="created">Pending</a>
            <a href="#failed" class="blocks-filter-tab filter-tab" data-status="failed">Failed</a>
        </nav>
    </div>

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

    <div class="overflow-x-auto rounded-xl border border-divider bg-surface">
    <table class="w-full min-w-[48rem] text-left text-sm">
        <thead></thead>
        <tbody>
            <tr><td colspan="8" class="p-5 text-center text-muted">Loading payments…</td></tr>
        </tbody>
    </table>
    </div>

    {{ crud::shell_close() }}

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