<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Browsy Monitoring - {% block title %}{% endblock %}</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .nav {
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .nav a {
            text-decoration: none;
            color: #666;
            margin-right: 20px;
            padding: 5px 10px;
        }
        .nav a:hover {
            color: #000;
        }
        .nav a.active {
            color: #000;
            font-weight: 500;
            border-bottom: 2px solid #000;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            font-size: 0.85em;
        }
        th, td {
            padding: 6px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f5f5f5;
            font-size: 0.9em;
        }
        tr:hover {
            background-color: #f9f9f9;
        }
        .timestamp {
            font-family: monospace;
            font-size: 0.9em;
        }
        .elapsed {
            color: #666;
            font-size: 0.85em;
            margin-left: 6px;
        }
        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .controls {
            display: flex;
            flex-direction: column;
            gap: 8px;
            min-width: 150px;
        }
        .refresh-button {
            padding: 4px 16px;
            margin-right: 8px;
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
        }
        .refresh-button:hover {
            background-color: #e9e9e9;
        }
        .auto-refresh {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            position: relative;
        }
        .refresh-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #666;
            display: none;
            margin-left: 4px;
        }
        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0.3; }
            100% { opacity: 1; }
        }
        .refresh-indicator.active {
            display: inline-block;
            animation: blink 0.5s infinite;
        }
        {% block additional_styles %}{% endblock %}
    </style>
    <script>
        let autoRefreshInterval;
        let indicatorInterval;
        let nextRefreshTime;

        function formatElapsedTime(utcTimestamp) {
            const utcMoment = moment.utc(utcTimestamp);
            const elapsed = moment().diff(utcMoment, 'seconds');
            
            const hours = Math.floor(elapsed / 3600);
            const minutes = Math.floor((elapsed % 3600) / 60);
            const seconds = elapsed % 60;
            
            let result = '';
            if (hours > 0) result += `${hours}h `;
            if (minutes > 0) result += `${minutes}m `;
            result += `${seconds}s`;
            
            return result + ' ago';
        }

        function formatLocalTime(utcTimestamp) {
            return moment.utc(utcTimestamp).local().format('YYYY-MM-DD HH:mm:ss');
        }

        function formatDuration(startTime, endTime) {
            const elapsed = moment.utc(endTime).diff(moment.utc(startTime));
            
            const hours = Math.floor(elapsed / 3600000);
            const minutes = Math.floor((elapsed % 3600000) / 60000);
            const seconds = Math.floor((elapsed % 60000) / 1000);
            const milliseconds = elapsed % 1000;
            
            let result = '';
            if (hours > 0) result += `${hours}h `;
            if (minutes > 0) result += `${minutes}m `;
            result += `${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}s`;
            
            return result;
        }

        function updateTimes() {
            document.querySelectorAll('.timestamp').forEach(el => {
                const utcTimestamp = el.getAttribute('data-time');
                el.textContent = formatLocalTime(utcTimestamp);
                const elapsedEl = el.nextElementSibling;
                if (elapsedEl && elapsedEl.classList.contains('elapsed')) {
                    elapsedEl.textContent = `(${formatElapsedTime(utcTimestamp)})`;
                }
            });

            document.querySelectorAll('.duration').forEach(el => {
                const startTime = el.getAttribute('data-start');
                const endTime = el.getAttribute('data-end');
                el.textContent = formatDuration(startTime, endTime);
            });
        }

        function checkRefreshIndicator() {
            if (!nextRefreshTime) return;
            
            const now = Date.now();
            const timeLeft = Math.ceil((nextRefreshTime - now) / 1000);
            const indicatorEl = document.getElementById('refreshIndicator');
            
            if (timeLeft <= 1) {
                indicatorEl.classList.add('active');
            } else {
                indicatorEl.classList.remove('active');
            }
        }

        function toggleAutoRefresh(checkbox) {
            localStorage.setItem('autoRefresh', checkbox.checked);
            if (checkbox.checked) {
                nextRefreshTime = Date.now() + 10000;
                autoRefreshInterval = setInterval(() => {
                    window.location.reload();
                }, 10000);
                indicatorInterval = setInterval(checkRefreshIndicator, 100);
            } else {
                clearInterval(autoRefreshInterval);
                clearInterval(indicatorInterval);
                nextRefreshTime = null;
                document.getElementById('refreshIndicator').classList.remove('active');
            }
        }

        function initAutoRefresh() {
            const checkbox = document.getElementById('autoRefresh');
            const shouldAutoRefresh = localStorage.getItem('autoRefresh');
            checkbox.checked = shouldAutoRefresh === null ? true : shouldAutoRefresh === 'true';
            if (checkbox.checked) {
                toggleAutoRefresh(checkbox);
            }
        }

        setInterval(updateTimes, 1000);
        
        document.addEventListener('DOMContentLoaded', () => {
            updateTimes();
            initAutoRefresh();
        });
    </script>
    {% block additional_scripts %}{% endblock %}
</head>
<body>
    <nav class="nav">
        <a href="/internal/workers" {% if request.url.path == '/internal/workers' %}class="active"{% endif %}>Workers</a>
        <a href="/internal/jobs" {% if request.url.path == '/internal/jobs' %}class="active"{% endif %}>Jobs</a>
    </nav>

    <div class="header-container">
        <h1>{% block page_title %}{% endblock %}</h1>
        <div class="controls">
            <button class="refresh-button" onclick="window.location.reload()">Refresh</button>
            <div class="auto-refresh">
                <input type="checkbox" id="autoRefresh" onchange="toggleAutoRefresh(this)" checked>
                <label for="autoRefresh">Auto-refresh (10s)</label>
                <div id="refreshIndicator" class="refresh-indicator"></div>
            </div>
        </div>
    </div>

    {% block content %}{% endblock %}
</body>
</html>