<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Oxana Dashboard - Busy</title>
    <script src="https://cdn.tailwindcss.com"></script>

</head>
<body class="bg-gray-950 text-gray-100 min-h-screen">
    <div class="max-w-[88rem] mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="mb-6">
            <h1 class="text-2xl font-bold tracking-tight">Oxana Dashboard</h1>
        </div>

        {% include "_tabs.html" %}

        <section class="mb-10">
            <h2 class="text-lg font-semibold mb-4">Active Processes ({{ stats.processes.len() }})</h2>
            {% if stats.processes.is_empty() %}
            <div class="bg-gray-900 border border-gray-800 rounded-lg p-6 text-center text-gray-500">
                No active processes
            </div>
            {% else %}
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-800 text-left text-xs text-gray-400 uppercase tracking-wide">
                            <th class="pb-3 pr-4">Hostname</th>
                            <th class="pb-3 pr-4">PID</th>
                            <th class="pb-3 pr-4 text-right">Busy</th>
                            <th class="pb-3 pr-4">Started</th>
                            <th class="pb-3">Last Heartbeat</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for process in &stats.processes %}
                        <tr class="border-b border-gray-800/50 hover:bg-gray-900/50">
                            <td class="py-3 pr-4 font-mono text-sm">{{ process.hostname }}</td>
                            <td class="py-3 pr-4 font-mono">{{ process.pid }}</td>
                            <td class="py-3 pr-4 text-right text-purple-400">{{ self.busy_for_process(process) }}</td>
                            <td class="py-3 pr-4 text-gray-400">{{ process.started_at|relative_time }}</td>
                            <td class="py-3 text-gray-400">{{ process.heartbeat_at|relative_time }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endif %}
        </section>

        <section class="mb-10">
            <h2 class="text-lg font-semibold mb-4">Active Queues</h2>
            {% if stats.queues.is_empty() %}
            <div class="bg-gray-900 border border-gray-800 rounded-lg p-6 text-center text-gray-500">
                No active queues
            </div>
            {% else %}
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-gray-800 text-left text-xs text-gray-400 uppercase tracking-wide">
                            <th class="pb-3 pr-4">Queue</th>
                            <th class="pb-3 pr-4 text-right">Concurrency</th>
                            <th class="pb-3 pr-4 text-right">State</th>
                            <th class="pb-3 pr-4 text-right">Busy</th>
                            <th class="pb-3 pr-4 text-right">Enqueued</th>
                            <th class="pb-3 text-right">Latency</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for queue in &stats.queues %}
                        {% let busy = self.busy_for(&queue.key) %}
                        {% if queue.enqueued > 0 || busy > 0 %}
                        <tr class="border-b border-gray-800/50 hover:bg-gray-900/50">
                            <td class="py-3 pr-4 font-mono text-sm">{% if queue.queues.is_empty() %}<a href="{{ base_path }}/queues/{{ queue.key|urlencode }}" class="text-blue-400 hover:text-blue-300 hover:underline">{{ queue.key }}</a>{% else %}{{ queue.key }}{% endif %}</td>
                            <td class="py-3 pr-4 text-right text-gray-300">{{ self.concurrency_for(&queue.key) }}{% if self.has_concurrency_override_for(&queue.key) %} <span class="text-gray-500">(<span class="line-through">{{ self.default_concurrency_for(&queue.key) }}</span>)</span>{% endif %}</td>
                            <td class="py-3 pr-4 text-right {{ self.state_class_for(&queue.key) }}">{{ self.state_for(&queue.key) }}</td>
                            <td class="py-3 pr-4 text-right text-purple-400">{{ busy }}</td>
                            <td class="py-3 pr-4 text-right text-blue-400">{{ queue.enqueued }}</td>
                            <td class="py-3 text-right text-purple-400">{{ queue.latency_s|format_latency }}</td>
                        </tr>
                        {% for dq in &queue.queues %}
                        {% if dq.enqueued > 0 %}
                        {% let dq_key = self.dynamic_queue_key(&queue.key, &dq.suffix) %}
                        <tr class="border-b border-gray-800/50 hover:bg-gray-900/50 text-gray-500">
                            <td class="py-2 pr-4 pl-10 font-mono text-xs">&#8627; <a href="{{ base_path }}/queues/{{ queue.key }}%23{{ dq.suffix|urlencode }}" class="text-blue-400 hover:text-blue-300 hover:underline">{{ dq.suffix }}</a></td>
                            <td class="py-2 pr-4 text-right text-xs text-gray-400">{{ self.concurrency_for(&dq_key) }}{% if self.has_concurrency_override_for(&dq_key) %} <span class="text-gray-600">(<span class="line-through">{{ self.default_concurrency_for(&dq_key) }}</span>)</span>{% endif %}</td>
                            <td class="py-2 pr-4 text-right text-xs {{ self.state_class_for(&dq_key) }}">{{ self.state_for(&dq_key) }}</td>
                            <td class="py-2 pr-4 text-right text-xs text-purple-400"></td>
                            <td class="py-2 pr-4 text-right text-xs text-blue-400">{{ dq.enqueued }}</td>
                            <td class="py-2 text-right text-xs text-purple-400">{{ dq.latency_s|format_latency }}</td>
                        </tr>
                        {% endif %}
                        {% endfor %}
                        {% endif %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% endif %}
        </section>

        <section class="mb-10">
            <h2 class="text-lg font-semibold mb-4">Currently Processing ({{ stats.processing.len() }})</h2>
            {% if stats.processing.is_empty() %}
            <div class="bg-gray-900 border border-gray-800 rounded-lg p-6 text-center text-gray-500">
                No jobs currently being processed
            </div>
            {% else %}
            <div class="space-y-3">
                {% for item in &stats.processing %}
                <div class="bg-gray-900 border border-gray-800 rounded-lg p-4">
                    <div class="flex items-start justify-between mb-2">
                        <div class="flex items-center gap-2">
                            <span class="inline-block w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
                            <span class="font-semibold text-sm">{{ item.job_envelope.job.name }}</span>
                        </div>
                        <a href="{{ base_path }}/jobs/{{ item.job_envelope.id|urlencode_strict }}" class="text-xs text-gray-500 hover:text-blue-300 hover:underline font-mono">{{ item.job_envelope.id }}</a>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-5 gap-2 text-xs text-gray-400 mt-2">
                        <div>
                            <span class="text-gray-500">Process:</span>
                            <span class="ml-1 text-gray-300 font-mono">{{ item.process_id }}</span>
                        </div>
                        <div>
                            <span class="text-gray-500">Queue:</span>
                            <a href="{{ base_path }}/queues/{{ item.job_envelope.queue|urlencode }}" class="ml-1 text-blue-400 hover:text-blue-300 hover:underline">{{ item.job_envelope.queue }}</a>
                        </div>
                        <div>
                            <span class="text-gray-500">Started:</span>
                            <span class="ml-1 text-gray-300">{{ item.job_envelope.meta.started_at|relative_time_micros_opt }}</span>
                        </div>
                        <div>
                            <span class="text-gray-500">Scheduled:</span>
                            <span class="ml-1 text-gray-300">{{ item.job_envelope.meta.scheduled_at|relative_time_micros }}</span>
                        </div>
                        <div>
                            <span class="text-gray-500">Retries:</span>
                            <span class="ml-1 text-gray-300">{{ item.job_envelope.meta.retries }}</span>
                        </div>
                    </div>
                    {% let arg_pills = item.job_envelope.job.args|simple_args %}
                    {% include "_arg_pills.html" %}
                    {% if item.job_envelope.job.args|show_args_json %}
                    <div class="mt-3">
                        <details>
                            <summary class="text-xs text-gray-500 cursor-pointer hover:text-gray-300">Arguments</summary>
                            <pre class="mt-2 text-xs bg-gray-950 rounded p-3 overflow-x-auto text-gray-300 border border-gray-800">{{ item.job_envelope.job.args|pretty_json }}</pre>
                        </details>
                    </div>
                    {% endif %}
                    {% match item.job_envelope.meta.state %}
                    {% when Some with (state) %}
                    {% if state|has_args %}
                    {% if state|show_job_progress %}
                    {% let progress_started_at = item.job_envelope.meta.started_at %}
                    {% include "_job_progress.html" %}
                    {% else %}
                    <div class="mt-3">
                        <details>
                            <summary class="text-xs text-gray-500 cursor-pointer hover:text-gray-300">State</summary>
                            <pre class="mt-2 text-xs bg-gray-950 rounded p-3 overflow-x-auto text-gray-300 border border-gray-800">{{ state|pretty_json }}</pre>
                        </details>
                    </div>
                    {% endif %}
                    {% endif %}
                    {% when None %}
                    {% endmatch %}
                    <div class="mt-3 flex justify-end">
                        <form method="POST" action="{{ base_path }}/queues/{{ item.job_envelope.queue|urlencode }}/jobs/{{ item.job_envelope.id|urlencode_strict }}/delete" onsubmit="return confirmDeleteJob('{{ item.job_envelope.id }}')">
                            <button type="submit" class="px-2.5 py-1 rounded bg-red-900/50 border border-red-800 hover:bg-red-800 text-red-300 text-xs transition-colors">Delete Job</button>
                        </form>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </section>
    </div>
    <script>
        function confirmDeleteJob(jobId) {
            return confirm('Are you sure you want to delete job ' + jobId + '?');
        }
    </script>
</body>
</html>
