{# templates/admin_modals/credits_settings_modal.html #}
<div id="credits-settings-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-settings-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 bg-white/[0.02] border-b border-white/5">
            <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="coins" class="h-6 w-6 text-yellow-400"></i>
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-white">Credits Settings</h3>
                    <p class="text-xs text-zinc-500 mt-1 uppercase tracking-widest font-black">Daily allocations &
                        Maximum Stacks</p>
                </div>
            </div>
            <button type="button"
                class="close-modal-btn p-3 bg-white/[0.03] 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 overflow-y-auto px-8 py-4 space-y-6 custom-scrollbar">
            <div class="space-y-6">

                {# Standard Tier Credits #}
                <div class="p-6 bg-white/[0.03] rounded-2xl border border-white/5">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h3 class="text-sm font-semibold text-white">Standard Credits</h3>
                            <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">Daily refresh
                                and max storage for Standard users.</p>
                        </div>
                        <button id="edit-modal-standard-credits-btn"
                            class="glass-button px-4 py-2 rounded-xl text-[10px] font-black uppercase text-blue-400">Edit</button>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mb-2">Daily
                                Allocation</p>
                            <div class="flex items-center bg-white/[0.02] p-1.5 rounded-xl border border-white/5">
                                <input type="number" id="modal_credits_standard_daily"
                                    value="{{ settings.credits_standard_daily or 50 }}" disabled
                                    class="bg-transparent border-none text-sm text-zinc-300 w-full focus:ring-0 px-3 outline-none disabled:opacity-50">
                                <span class="text-[10px] font-black text-zinc-700 pr-3"></span>
                            </div>
                        </div>
                        <div>
                            <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mb-2">Max Stack</p>
                            <div class="flex items-center bg-white/[0.02] p-1.5 rounded-xl border border-white/5">
                                <input type="number" id="modal_credits_standard_max"
                                    value="{{ settings.credits_standard_max or 100 }}" disabled
                                    class="bg-transparent border-none text-sm text-zinc-300 w-full focus:ring-0 px-3 outline-none disabled:opacity-50">
                                <span class="text-[10px] font-black text-zinc-700 pr-3"></span>
                            </div>
                        </div>
                    </div>
                </div>

                {# Pro Tier Credits #}
                <div class="p-6 bg-white/[0.03] rounded-2xl border border-white/5">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h3 class="text-sm font-semibold text-white">Pro Credits</h3>
                            <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">Daily refresh
                                and max storage for Pro users.</p>
                        </div>
                        <button id="edit-modal-pro-credits-btn"
                            class="glass-button px-4 py-2 rounded-xl text-[10px] font-black uppercase text-blue-400">Edit</button>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mb-2">Daily
                                Allocation</p>
                            <div class="flex items-center bg-white/[0.02] p-1.5 rounded-xl border border-white/5">
                                <input type="number" id="modal_credits_pro_daily"
                                    value="{{ settings.credits_pro_daily or 250 }}" disabled
                                    class="bg-transparent border-none text-sm text-zinc-300 w-full focus:ring-0 px-3 outline-none disabled:opacity-50">
                                <span class="text-[10px] font-black text-zinc-700 pr-3"></span>
                            </div>
                        </div>
                        <div>
                            <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mb-2">Max Stack</p>
                            <div class="flex items-center bg-white/[0.02] p-1.5 rounded-xl border border-white/5">
                                <input type="number" id="modal_credits_pro_max"
                                    value="{{ settings.credits_pro_max or 1000 }}" disabled
                                    class="bg-transparent border-none text-sm text-zinc-300 w-full focus:ring-0 px-3 outline-none disabled:opacity-50">
                                <span class="text-[10px] font-black text-zinc-700 pr-3"></span>
                            </div>
                        </div>
                    </div>
                </div>

                {# Action Costs #}
                <div class="p-6 bg-white/[0.03] rounded-2xl border border-white/5">
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <h3 class="text-sm font-semibold text-white">Action Costs</h3>
                            <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mt-1">Credits
                                required for specific actions.</p>
                        </div>
                        <button id="edit-modal-action-costs-btn"
                            class="glass-button px-4 py-2 rounded-xl text-[10px] font-black uppercase text-blue-400">Edit</button>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <p class="text-[10px] text-zinc-500 uppercase tracking-widest font-bold mb-2">Create
                                Repository</p>
                            <div class="flex items-center bg-white/[0.02] p-1.5 rounded-xl border border-white/5">
                                <input type="number" id="modal_credits_create_repo_cost"
                                    value="{{ settings.credits_create_repo_cost or 10 }}" disabled
                                    class="bg-transparent border-none text-sm text-zinc-300 w-full focus:ring-0 px-3 outline-none disabled:opacity-50">
                                <span class="text-[10px] font-black text-zinc-700 pr-3"></span>
                            </div>
                        </div>
                        <div>
                            <p
                                class="text-[10px] text-zinc-500 uppercase tracking-widest font-black mb-2 tracking-tighter">
                                Fork Repository</p>
                            <div class="flex items-center bg-white/[0.02] p-1.5 rounded-xl border border-white/5">
                                <input type="number" id="modal_credits_fork_repo_cost"
                                    value="{{ settings.credits_fork_repo_cost or 15 }}" disabled
                                    class="bg-transparent border-none text-sm text-zinc-300 w-full focus:ring-0 px-3 outline-none disabled:opacity-50">
                                <span class="text-[10px] font-black text-zinc-700 pr-3"></span>
                            </div>
                        </div>
                        <div>
                            <p
                                class="text-[10px] text-zinc-500 uppercase tracking-widest font-black mb-2 tracking-tighter">
                                Create Branch</p>
                            <div class="flex items-center bg-white/[0.02] p-1.5 rounded-xl border border-white/5">
                                <input type="number" id="modal_credits_create_branch_cost"
                                    value="{{ settings.credits_create_branch_cost or 5 }}" disabled
                                    class="bg-transparent border-none text-sm text-zinc-300 w-full focus:ring-0 px-3 outline-none disabled:opacity-50">
                                <span class="text-[10px] font-black text-zinc-700 pr-3"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </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>