{# templates/admin_modals/profiler_modal.html #}
<style>
@keyframes profiler-border-spin {
  0%, 100% { border-color: rgb(168 85 247); box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.3); }
  50% { border-color: rgb(59 130 246); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); }
}
.profiler-inprogress-border {
  animation: profiler-border-spin 1.5s ease-in-out infinite;
}
</style>
<div id="profiler-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="profiler-backdrop"></div>
    <div
        class="modal-content glass-modal modal-radius-xl shadow-3xl w-full max-w-4xl 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 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-cyan-500/10 rounded-xl border border-cyan-500/20 mr-4 shadow-sm">
                        <i data-lucide="activity" class="h-6 w-6 text-cyan-400"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold text-white">Profiler</h3>
                        <p class="text-xs text-zinc-500 mt-1 uppercase tracking-widest font-black">Route execution
                            times</p>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <button type="button" id="profiler-refresh-btn"
                        class="p-3 bg-white/[0.02] hover:bg-cyan-500/20 border border-white/5 hover:border-cyan-500/30 rounded-2xl text-zinc-500 hover:text-cyan-400 transition-all"
                        title="Refresh">
                        <i data-lucide="refresh-cw" class="h-5 w-5"></i>
                    </button>
                    <button type="button" id="profiler-clear-btn"
                        class="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"
                        title="Clear">
                        <i data-lucide="trash-2" class="h-5 w-5"></i>
                    </button>
                    <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>
        </div>

        <!-- Body -->
        <div class="flex-1 overflow-y-auto px-4 md:px-8 py-4 custom-scrollbar">
            <p id="profiler-hint" class="text-xs text-zinc-500 mb-4">Enable the profiler in System Settings to record
                data.</p>
            <div id="profiler-in-progress" class="space-y-3 mb-6">
                <!-- In-progress entries: purple, animated border, loading spinner, elapsed time -->
            </div>
            <div id="profiler-entries" class="space-y-3">
                <!-- Completed entries -->
            </div>
        </div>
    </div>
</div>