{% extends "admin_base.html" %}
{% import "macros/modal.html" as modal %}
{% import "macros/loading_spinner.html" as spinner %}

{% block page_title %}Cashback Balances{% endblock %}

{% block admin_content %}
<main class="mx-auto w-full max-w-7xl space-y-5 p-4 sm:p-6" data-plugin="cashback-balances">
    <header>
        <p class="text-sm font-semibold text-brand">Commerce · Rewards</p>
        <h1 class="text-2xl font-bold text-foreground sm:text-3xl">Cashback balances</h1>
        <p class="mt-1 text-sm text-muted">Review customer balances and their cashback history.</p>
    </header>
    <p id="balances-status" class="min-h-6 text-sm text-muted" role="status" aria-live="polite">Loading balances…</p>
    <section id="balances-list-container" class="min-w-0 overflow-hidden rounded-xl border border-divider bg-surface shadow-sm" aria-label="Customer cashback balances">
        <div class="w-full overflow-x-auto">
            <table class="blocks-admin-table responsive-table min-w-full" id="balances-table">
                <thead><tr><th scope="col">User</th><th scope="col">Accumulated cashback</th><th scope="col">Last updated</th><th scope="col"><span class="sr-only">Actions</span></th></tr></thead>
                <tbody id="balances-body">{{ spinner::table_skeleton(colspan=4, lines=3, label="Loading balances…") }}</tbody>
            </table>
        </div>
        <div class="p-3 sm:px-5"><div id="balances-pagination" class="blocks-admin-pagination-footer pagination-footer" hidden>
            <p id="balances-summary" class="text-sm text-muted"></p>
            <div class="pagination-buttons">
                <button type="button" id="balances-prev" class="blocks-button blocks-button-secondary" aria-label="Previous page">Previous</button>
                <span id="balances-page-info" class="page-info text-sm text-muted">1 / 1</span>
                <button type="button" id="balances-next" class="blocks-button blocks-button-secondary" aria-label="Next page">Next</button>
            </div>
        </div></div>
    </section>
</main>

<div id="admin-config" hidden data-current-page="1" data-total-pages="1" data-currency-symbol="{{ currency_symbol | default(value='₹') }}"></div>
<span id="timezone-config" hidden></span>
{{ modal::modal(id="historyModal", title="Cashback history", close_attrs='id="closeHistoryModalBtn"', body_html='<div id="history-status" class="mb-3 min-h-6 text-sm text-muted" role="status" aria-live="polite"></div><div id="historyContent" class="min-w-0 overflow-x-auto"></div>', footer_html='<button type="button" id="history-modal-footer-close" class="blocks-button blocks-button-secondary">Close</button>') }}
{% endblock admin_content %}

{% block scripts %}
<script src="/plugins/cashback/assets/js/cashback_admin.js"></script>
{% endblock %}