<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}Drakkar Debug{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
    tailwind.config = {
        theme: { extend: { colors: {
            cream: { 50:'#faf9f6', 100:'#f5f3ee', 200:'#ebe8e0', 300:'#ddd9ce' },
            ink: { 700:'#3d3d3d', 800:'#2a2a2a', 900:'#1a1a1a' },
        }}}
    }
    </script>
    <style>@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}.live-dot{animation:pulse-dot 2s ease-in-out infinite;}</style>
    {% block head %}{% endblock %}
</head>
<body class="text-ink-700 min-h-screen" style="background: linear-gradient(180deg, #e8e6e0 0%, #f0eee8 120px, #f5f3ee 300px, #f5f3ee 100%);">
    <nav class="px-4 py-3" style="background:#2a2a2a;">
        <div class="width-container max-w-7xl mx-auto flex items-center justify-between">
            <div class="flex items-center gap-6">
                <span class="text-lg font-bold text-white">Drakkar</span>
                <a href="/" class="text-gray-400 hover:text-white text-sm">Dashboard</a>
                <a href="/partitions" class="text-gray-400 hover:text-white text-sm">Partitions</a>
                <a href="/sinks" class="text-gray-400 hover:text-white text-sm">Sinks</a>
                <a href="/live" class="text-gray-400 hover:text-white text-sm">Live <span class="live-dot" style="color:#ef4444;font-size:32px;vertical-align:middle;line-height:0;position:relative;top:-2px;">&bull;</span></a>
                <a href="/debug" class="text-gray-400 hover:text-white text-sm">Debug</a>
                <a href="/history" class="text-gray-400 hover:text-white text-sm">History</a>
            </div>
            {% set sink_links = get_sink_ui_links() %}
            {% if sink_links %}
            <div class="flex items-center gap-3">
                {% for link in sink_links %}
                <a href="{{ link.ui_url }}" target="_blank" rel="noopener"
                   title="{{ link.sink_type }}/{{ link.name }}"
                   class="text-gray-500 hover:text-white transition-colors">
                    {% if link.sink_type == 'kafka' %}
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15.5v-2.04c-1.73-.23-3.23-1.2-4.07-2.63l1.5-1.12c.6 1.03 1.52 1.76 2.57 1.97V9.62c-2.28-.46-4-2.5-4-4.93h2c0 1.66 1.12 3.05 2.64 3.46l.36.08V4h2v4.23l.36-.08C14.88 7.74 16 6.35 16 4.69h2c0 2.43-1.72 4.47-4 4.93v4.06c1.05-.21 1.97-.94 2.57-1.97l1.5 1.12c-.84 1.43-2.34 2.4-4.07 2.63v2.04h-2z"/></svg>
                    {% elif link.sink_type == 'postgres' %}
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C8.13 2 5 3.79 5 6v12c0 2.21 3.13 4 7 4s7-1.79 7-4V6c0-2.21-3.13-4-7-4zm0 2c3.04 0 5 1.23 5 2s-1.96 2-5 2-5-1.23-5-2 1.96-2 5-2zm5 14c0 .77-1.96 2-5 2s-5-1.23-5-2v-2.23c1.25.77 3.02 1.23 5 1.23s3.75-.46 5-1.23V18zm0-5c0 .77-1.96 2-5 2s-5-1.23-5-2v-2.23c1.25.77 3.02 1.23 5 1.23s3.75-.46 5-1.23V13zm0-5c0 .77-1.96 2-5 2s-5-1.23-5-2V5.77C8.25 6.54 10.02 7 12 7s3.75-.46 5-1.23V8z"/></svg>
                    {% elif link.sink_type == 'mongo' %}
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M13.74 4.23c-.84-1.57-1.28-2.49-1.74-3.23-.46.74-.9 1.66-1.74 3.23C8.56 7.55 4 12.46 4 15.91 4 19.82 7.58 23 12 23s8-3.18 8-7.09c0-3.45-4.56-8.36-6.26-11.68zM12 21c-1.1 0-2-.72-2-1.6s.9-1.6 2-1.6 2 .72 2 1.6-.9 1.6-2 1.6z"/></svg>
                    {% elif link.sink_type == 'redis' %}
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                    {% elif link.sink_type == 'http' %}
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
                    {% elif link.sink_type == 'filesystem' %}
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M10 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
                    {% else %}
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="12" r="8"/></svg>
                    {% endif %}
                </a>
                {% endfor %}
            </div>
            {% endif %}
            <div class="flex items-center gap-3">
                <button id="width-toggle" title="Toggle full width" onclick="toggleWidth()"
                        class="text-gray-500 hover:text-white transition-colors">
                    <svg id="width-icon-expand" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
                    <svg id="width-icon-shrink" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none;"><path d="M4 14h6v6M14 4h6v6M10 14l-7 7M21 3l-7 7"/></svg>
                </button>
                <div class="relative" id="worker-switcher">
                    <button onclick="document.getElementById('worker-dropdown').classList.toggle('hidden')"
                            class="text-sm text-gray-400 hover:text-white font-mono flex items-center gap-1">
                        {{ worker_id }}
                        <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" class="opacity-50"><path d="M7 10l5 5 5-5z"/></svg>
                    </button>
                    <div id="worker-dropdown" class="hidden absolute right-0 mt-1 w-56 rounded shadow-lg z-50" style="background:#3d3d3d;">
                        <div class="py-1 text-sm" id="worker-list">
                            <div class="px-3 py-2 text-gray-500">scanning...</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <main class="width-container max-w-7xl mx-auto px-4 py-6">
        {% block content %}{% endblock %}
    </main>
    <script>
    function applyWidth(wide) {
        document.querySelectorAll('.width-container').forEach(function(el) {
            if (wide) {
                el.classList.remove('max-w-7xl');
                el.classList.add('max-w-full');
            } else {
                el.classList.remove('max-w-full');
                el.classList.add('max-w-7xl');
            }
        });
        document.getElementById('width-icon-expand').style.display = wide ? 'none' : '';
        document.getElementById('width-icon-shrink').style.display = wide ? '' : 'none';
    }
    function toggleWidth() {
        var wide = localStorage.getItem('drakkar-wide') === '1';
        wide = !wide;
        localStorage.setItem('drakkar-wide', wide ? '1' : '0');
        applyWidth(wide);
    }
    applyWidth(localStorage.getItem('drakkar-wide') === '1');
    document.addEventListener('keydown', function(e) {
        if (e.key === 'f' || e.key === 'F') {
            var tag = (e.target.tagName || '').toLowerCase();
            if (tag === 'input' || tag === 'textarea' || tag === 'select' || e.target.isContentEditable) return;
            e.preventDefault();
            toggleWidth();
        }
    });
    </script>
    <script>
    document.addEventListener('click', function(e) {
        var el = e.target.closest('.expandable');
        if (!el) return;
        var expanding = el.classList.contains('truncate');
        el.classList.toggle('truncate');
        el.classList.toggle('max-w-xs');
        el.classList.toggle('max-w-md');
        el.classList.toggle('whitespace-pre-wrap');
        el.classList.toggle('break-all');
        var full = el.getAttribute('data-full');
        if (full) {
            if (expanding) {
                el.setAttribute('data-short', el.textContent);
                el.textContent = full;
            } else {
                el.textContent = el.getAttribute('data-short') || full;
            }
        }
    });
    (function() {
        var list = document.getElementById('worker-list');
        if (!list) return;
        function refresh() {
            fetch('/api/workers').then(function(r) { return r.json(); }).then(function(workers) {
                list.textContent = '';
                if (!workers.length) {
                    var empty = document.createElement('div');
                    empty.className = 'px-3 py-2 text-gray-500';
                    empty.textContent = 'no workers found';
                    list.appendChild(empty);
                    return;
                }
                var generalPages = ['/', '/partitions', '/sinks', '/live', '/debug', '/history'];
                var path = window.location.pathname;
                var suffix = generalPages.indexOf(path) !== -1 ? path : '/';
                var lastCluster = null;
                workers.forEach(function(w) {
                    var cluster = w.cluster || '';
                    if (cluster !== lastCluster) {
                        if (lastCluster !== null) {
                            var sep = document.createElement('div');
                            sep.className = 'border-t border-gray-600 my-1';
                            list.appendChild(sep);
                        }
                        if (cluster) {
                            var header = document.createElement('a');
                            header.href = '#';
                            header.className = 'block px-3 py-1.5 text-gray-500 text-xs font-semibold uppercase tracking-wide cursor-pointer hover:text-gray-400';
                            header.textContent = cluster;
                            header.onclick = function(e) { e.preventDefault(); };
                            list.appendChild(header);
                        }
                        lastCluster = cluster;
                    }
                    if (w.is_current) {
                        var cur = document.createElement('div');
                        cur.className = 'block px-3 py-2 text-white bg-gray-600';
                        var name = document.createElement('span');
                        name.className = 'font-mono';
                        name.textContent = w.worker_name || '?';
                        cur.appendChild(name);
                        var badge = document.createElement('span');
                        badge.className = 'text-gray-400 text-xs ml-2';
                        badge.textContent = 'current';
                        cur.appendChild(badge);
                        list.appendChild(cur);
                    } else {
                        var base = w.url || ('http://' + w.ip_address + ':' + w.debug_port + '/');
                        var a = document.createElement('a');
                        a.href = base.replace(/\/+$/, '') + suffix;
                        a.className = 'block px-3 py-2 text-gray-300 hover:text-white hover:bg-gray-600';
                        var name = document.createElement('span');
                        name.className = 'font-mono';
                        name.textContent = w.worker_name || '?';
                        a.appendChild(name);
                        if (!w.debug_url) {
                            var addr = document.createElement('span');
                            addr.className = 'text-gray-500 text-xs ml-2';
                            addr.textContent = w.ip_address + ':' + w.debug_port;
                            a.appendChild(addr);
                        }
                        list.appendChild(a);
                    }
                });
            }).catch(function() {
                list.textContent = '';
                var err = document.createElement('div');
                err.className = 'px-3 py-2 text-gray-500';
                err.textContent = 'error';
                list.appendChild(err);
            });
        }
        refresh();
        setInterval(refresh, 10000);
        document.addEventListener('click', function(e) {
            if (!e.target.closest('#worker-switcher')) {
                document.getElementById('worker-dropdown').classList.add('hidden');
            }
        });
    })();
    </script>
</body>
</html>
