<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Claude Monitor - Track Claude Code usage and analytics">
    <meta name="theme-color" content="#0770E3">

    <title>{% block title %}Claude Monitor{% endblock %}</title>

    <!-- Tailwind CSS 3.x -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- DaisyUI -->
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.11.1/dist/full.min.css" rel="stylesheet" type="text/css">

    <!-- Alpine.js 3.x -->
    <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>

    <!-- HTMX 2.0 -->
    <script src="https://unpkg.com/htmx.org@2.0.0"></script>

    <!-- HTMX Loading Indicator Configuration -->
    <style>
        /* Global loading bar at top of page */
        #global-loader {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #0770E3, #38bdf8, #0770E3);
            background-size: 200% 100%;
            z-index: 9999;
            opacity: 0;
            transition: opacity 100ms ease-out;
            animation: shimmer 1s ease-in-out infinite;
            box-shadow: 0 0 10px rgba(7, 112, 227, 0.5);
        }
        
        #global-loader.htmx-request,
        #global-loader.loading {
            opacity: 1;
        }
        
        @keyframes shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        /* Show loading indicator during HTMX requests */
        .htmx-indicator {
            display: none;
            opacity: 0;
            transition: opacity 200ms ease-in;
        }
        .htmx-request .htmx-indicator {
            display: inline-flex;
            opacity: 1;
        }
        .htmx-request.htmx-indicator {
            display: inline-flex;
            opacity: 1;
        }
        
        /* Dim content while loading */
        .htmx-request .loading-content {
            opacity: 0.5;
            pointer-events: none;
            transition: opacity 150ms ease-out;
        }
        
        /* Clickable row loading state - more visible */
        tr.htmx-request {
            background: linear-gradient(90deg, rgba(7, 112, 227, 0.15) 0%, rgba(7, 112, 227, 0.05) 50%, rgba(7, 112, 227, 0.15) 100%) !important;
            background-size: 200% 100%;
            animation: row-shimmer 1s ease-in-out infinite;
            position: relative;
        }
        
        tr.htmx-request td {
            opacity: 0.6;
        }
        
        tr.htmx-request td:first-child::before {
            content: '';
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid #0770E3;
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
            margin-right: 8px;
            vertical-align: middle;
        }
        
        @keyframes row-shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        /* Button loading state */
        button.htmx-request, a.htmx-request {
            opacity: 0.7;
            pointer-events: none;
        }
        
        /* Spinning loader animation */
        .spinner {
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /* Skeleton loading placeholder */
        .skeleton-pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
    </style>

    <!-- Chart.js 4.x -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
    <!-- Chart.js date adapter for time scales -->
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

    <!-- Custom brand color configuration for Tailwind -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'brand-blue': '#0770E3',
                    }
                }
            }
        }
    </script>

    <style>
        :root {
            --brand-blue: #0770E3;
        }

        html {
            scroll-behavior: smooth;
        }

        .btn-brand {
            @apply bg-[#0770E3] hover:bg-[#0560c1] text-white font-medium transition-colors;
        }

        .text-brand {
            @apply text-[#0770E3];
        }

        .border-brand {
            @apply border-[#0770E3];
        }
    </style>

    {% block extra_head %}{% endblock %}
</head>
<body class="bg-gray-50" hx-indicator="#global-loader">
    <!-- Global loading bar -->
    <div id="global-loader"></div>
    
    {% block content %}{% endblock %}
    
    <!-- HTMX configuration -->
    <script>
        // Add loading class to body during any HTMX request
        document.body.addEventListener('htmx:beforeRequest', function(evt) {
            document.body.classList.add('htmx-requesting');
        });

        document.body.addEventListener('htmx:afterRequest', function(evt) {
            document.body.classList.remove('htmx-requesting');
        });

        // Handle failed requests
        document.body.addEventListener('htmx:responseError', function(evt) {
            document.body.classList.remove('htmx-requesting');
        });

        // Show loading bar immediately on nav link clicks (full page navigations)
        document.addEventListener('click', function(e) {
            const link = e.target.closest('a[href]');
            if (!link || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
            const href = link.getAttribute('href');
            if (!href || href.startsWith('#') || href.startsWith('javascript:') || link.target === '_blank') return;
            if (link.hasAttribute('hx-get') || link.hasAttribute('hx-post') ||
                link.hasAttribute('hx-put') || link.hasAttribute('hx-patch') || link.hasAttribute('hx-delete')) return;
            try {
                const url = new URL(href, window.location.origin);
                if (url.origin === window.location.origin) {
                    // Skip hash-only navigations — they don't trigger pageshow so the loader would get stuck
                    if (url.pathname === window.location.pathname &&
                        url.search === window.location.search &&
                        url.hash) return;
                    document.getElementById('global-loader').classList.add('loading');
                }
            } catch(err) { /* Invalid URL – skip */ }
        });

        // Reset loader if navigation is cancelled (e.g. back-forward cache restore)
        window.addEventListener('pageshow', function() {
            document.getElementById('global-loader').classList.remove('loading');
        });
    </script>
</body>
</html>
