{# templates/admin_modals/manage_subscription_modal.html #}
<div id="manage-subscription-modal"
    class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[70] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition" id="manage-sub-backdrop"></div>
    <div
        class="modal-content glass-modal modal-radius-xl shadow-3xl w-full max-w-lg border border-white/10 modal-content-transition relative flex flex-col overflow-hidden">

        <!-- Header -->
        <div class="p-8 pb-4 flex-shrink-0 bg-white/[0.02] border-b border-white/5">
            <div class="flex items-center justify-between mb-6">
                <div class="flex items-center">
                    <div class="p-2.5 bg-purple-500/10 rounded-xl border border-purple-500/20 mr-4 shadow-sm">
                        <i data-lucide="sparkles" class="h-6 w-6 text-purple-400"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold text-white">Manage Subscription</h3>
                        <p class="text-xs text-zinc-500 mt-1 uppercase tracking-widest font-black"
                            id="manage-sub-username-display">User Name</p>
                    </div>
                </div>
                <button type="button"
                    class="close-modal-btn p-3 bg-white/[0.02] 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>
        </div>

        <!-- Body -->
        <div class="flex-1 overflow-y-auto px-8 py-4 custom-scrollbar">

            <div id="manage-sub-loading" class="flex flex-col items-center justify-center py-10 hidden">
                <i data-lucide="loader-2" class="h-8 w-8 text-purple-500 animate-spin mb-4"></i>
                <p class="text-zinc-500 font-medium text-sm">Loading subscription details...</p>
            </div>

            <div id="manage-sub-content">
                <div class="glass-panel p-6 rounded-2xl border border-white/5 bg-white/[0.02] mb-6">
                    <h4 class="text-sm font-bold text-white mb-4 uppercase tracking-widest text-[10px] text-zinc-500">
                        Subscription Status</h4>
                    <div class="space-y-4">
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-zinc-400">Status</span>
                            <span id="manage-sub-status-badge"
                                class="px-3 py-1 rounded-lg text-[10px] font-black uppercase tracking-widest shadow-sm"></span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-zinc-400">Pro Since</span>
                            <span id="manage-sub-pro-since" class="text-sm font-medium text-white">-</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-zinc-400">Next Billing</span>
                            <span id="manage-sub-next-billing" class="text-sm font-medium text-white">-</span>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-zinc-400">Renewal Status</span>
                            <span id="manage-sub-renewal-status" class="text-sm font-medium text-white">-</span>
                        </div>
                    </div>
                </div>

                <div class="space-y-4">
                    <div class="glass-panel p-6 rounded-2xl border border-white/5 bg-white/[0.02] space-y-4">
                        <div>
                            <h4
                                class="text-sm font-bold text-white uppercase tracking-widest text-[10px] text-zinc-500">
                                Admin Provisions</h4>
                            <p class="text-xs text-zinc-400 mt-1 pb-4 border-b border-white/5">Manage manual provisions
                                applied by moderators.</p>
                        </div>

                        <div class="flex items-center justify-between pt-2">
                            <div>
                                <span class="text-sm font-medium text-white block">Free Lifetime Pro</span>
                                <span class="text-xs text-zinc-500">Gift Pro tier without a Stripe subscription.</span>
                            </div>
                            <!-- Toggle switch styling -->
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" id="manage-sub-free-pro-toggle" class="sr-only peer">
                                <div
                                    class="w-11 h-6 bg-zinc-800 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-500">
                                </div>
                            </label>
                        </div>
                    </div>

                    <div id="manage-sub-cancel-container"
                        class="glass-panel p-6 rounded-2xl border border-red-500/20 bg-red-500/5 hidden flex-col items-center justify-center text-center">
                        <i data-lucide="alert-triangle" class="h-6 w-6 text-red-500 mb-3"></i>
                        <h4 class="text-sm font-bold text-white mb-2">Cancel Active Subscription</h4>
                        <p class="text-xs text-zinc-400 mb-4">This will immediately terminate their Stripe subscription.
                            Warning: No refunds are issued automatically.</p>
                        <button id="manage-sub-cancel-btn"
                            class="glass-button no-hover-lift w-full border-red-500/30 text-red-400 hover:bg-red-500/10 hover:border-red-500/50 py-2.5 rounded-xl font-medium text-sm transition-all focus:outline-none focus:ring-2 focus:ring-red-500/50">
                            Force Cancel Immediately
                        </button>
                    </div>
                </div>
            </div>

        </div>

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

<!-- Confirm Cancel Modal inside settings structure -->
<div id="admin-confirm-sub-cancel-modal"
    class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[80] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition" id="admin-confirm-sub-backdrop"></div>
    <div
        class="modal-content glass-modal modal-radius-lg shadow-3xl p-8 w-full max-w-sm border border-red-500/30 bg-white/[0.02] modal-content-transition relative z-[80]">
        <div class="flex flex-col items-center text-center">
            <div class="p-4 bg-red-500/10 rounded-2xl border border-red-500/20 mb-6">
                <i data-lucide="alert-triangle" class="h-8 w-8 text-red-500"></i>
            </div>
            <h3 class="text-xl font-bold mb-3 text-white">Terminate Subscription?</h3>
            <p class="text-sm text-zinc-400 leading-relaxed mb-8">Are you sure you want to FORCE CANCEL this
                subscription immediately? The user will immediately lose access and Stripe will stop billing.</p>
        </div>
        <div class="flex flex-col gap-3">
            <button id="admin-confirm-force-cancel-btn"
                class="glass-button-primary bg-gradient-to-r from-red-600 to-red-500 hover:from-red-500 hover:to-red-400 border-none w-full py-4 rounded-2xl font-bold text-sm shadow-xl shadow-red-500/20 text-white">
                Yes, Force Cancel
            </button>
            <button type="button"
                class="close-modal-btn glass-button no-hover-lift w-full py-4 rounded-2xl font-bold text-sm text-zinc-400 hover:text-white">
                Cancel
            </button>
        </div>
    </div>
</div>