{# templates/credits_history_modal.html #}
<div id="credits-history-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-50 p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition" id="credits-history-backdrop"></div>
    <div
        class="modal-content glass-modal modal-radius-xl shadow-3xl w-full max-w-2xl h-auto max-h-[85vh] border border-white/10 modal-content-transition relative flex flex-col overflow-hidden">

        <!-- Header -->
        <div class="p-8 pb-4 flex-shrink-0 flex items-center justify-between">
            <div class="flex items-center">
                <div class="p-2.5 bg-yellow-500/10 rounded-xl border border-yellow-500/20 mr-4 shadow-sm">
                    <i data-lucide="history" class="h-6 w-6 text-yellow-400"></i>
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-white">Credits History</h3>
                    <p class="text-xs text-zinc-500 mt-1 uppercase tracking-widest font-black">Transaction Log & Daily
                        Income</p>
                </div>
            </div>
            <button type="button"
                class="close-modal-btn p-3 bg-white/5 hover:bg-red-500/20 border border-white/5 hover:border-red-500/30 rounded-2xl text-zinc-500 hover:text-red-400 transition-all">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>

        <!-- Scrollable Body -->
        <div class="flex-1 min-h-0 overflow-y-auto px-8 py-4 custom-scrollbar">
            <div id="credits-history-container" class="space-y-4">
                <!-- Loading State -->
                <div class="flex flex-col items-center justify-center py-20 opacity-40">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-white mb-4"></div>
                    <p class="text-[10px] font-black uppercase tracking-widest">Fetching history...</p>
                </div>
            </div>
        </div>

        <!-- Pagination -->
        <div id="credits-history-pagination-wrapper" class="hidden flex-shrink-0 px-8 py-3 flex items-center justify-between gap-4 border-t border-white/5">
            <span id="credits-history-range" class="text-xs text-zinc-500"></span>
            <div id="credits-history-pagination" class="flex items-center gap-1"></div>
        </div>

        <!-- Footer -->
        <div class="p-8 pt-4 flex-shrink-0 flex justify-end border-t border-white/5">
            <button type="button"
                class="close-modal-btn glass-button px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-zinc-400 hover:text-white">Done</button>
        </div>
    </div>
</div>