<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Queue: {{ queue_key }} - Oxana</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="flex items-center justify-between mb-6">
            <h1 class="text-2xl font-bold tracking-tight">Oxana Dashboard</h1>
        </div>

        {% include "_tabs.html" %}

        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-6">
            <div class="flex flex-wrap items-center gap-3">
                <h2 class="text-lg font-semibold font-mono">{{ queue_key }}</h2>
                <span class="px-2.5 py-1 rounded border text-xs font-medium {{ self.state_class() }}">{{ self.state_label() }}</span>
                <span class="px-2.5 py-1 rounded border border-gray-800 bg-gray-900 text-gray-300 text-xs">
                    Concurrency: {{ self.concurrency_label() }}
                    {% if self.has_concurrency_override() %}
                    <span class="text-gray-500">(<span class="line-through">{{ self.concurrency_default_label() }}</span>)</span>
                    {% endif %}
                </span>
            </div>
            <div class="flex flex-wrap items-center gap-2">
                {% if self.can_change_concurrency() %}
                <form method="POST" action="{{ self.queue_action_path("concurrency") }}" onsubmit="return promptConcurrency(this)" data-queue-key="{{ queue_key }}" data-current-concurrency="{{ self.concurrency_label() }}" data-default-concurrency="{{ self.concurrency_default_label() }}">
                    <input type="hidden" name="concurrency" value="">
                    <button type="submit" class="px-3 py-1.5 rounded bg-gray-800 border border-gray-700 hover:bg-gray-700 text-gray-300 text-sm transition-colors">Change concurrency</button>
                </form>
                {% endif %}
                {% if self.is_paused() %}
                <form method="POST" action="{{ base_path }}/queues/{{ queue_key|urlencode }}/unpause">
                    <button type="submit" class="px-3 py-1.5 rounded bg-green-900/50 border border-green-800 hover:bg-green-800 text-green-300 text-sm transition-colors">Unpause</button>
                </form>
                {% else %}
                <form method="POST" action="{{ base_path }}/queues/{{ queue_key|urlencode }}/pause">
                    <button type="submit" class="px-3 py-1.5 rounded bg-yellow-900/50 border border-yellow-800 hover:bg-yellow-800 text-yellow-300 text-sm transition-colors">Pause</button>
                </form>
                {% endif %}
                <form method="POST" action="{{ base_path }}/queues/{{ queue_key|urlencode }}/wipe" onsubmit="return confirmWipe('{{ queue_key }}')">
                    <button type="submit" class="px-3 py-1.5 rounded bg-red-900/50 border border-red-800 hover:bg-red-800 text-red-300 text-sm transition-colors">Wipe</button>
                </form>
            </div>
        </div>

        {% match queue_stats %}
        {% when Some with (qs) %}
        <div class="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 gap-4 mb-8">
            <div class="bg-gray-900 rounded-lg p-4 border border-gray-800">
                <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Enqueued</div>
                <div class="text-2xl font-semibold text-blue-400">{{ qs.enqueued|format_number }}</div>
            </div>
            <div class="bg-gray-900 rounded-lg p-4 border border-gray-800">
                <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Busy</div>
                <div class="text-2xl font-semibold text-purple-400">{{ busy|format_number }}</div>
            </div>
            <div class="bg-gray-900 rounded-lg p-4 border border-gray-800">
                <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Processed</div>
                <div class="text-2xl font-semibold text-green-400">{{ qs.processed|format_number_i64 }}</div>
            </div>
            <div class="bg-gray-900 rounded-lg p-4 border border-gray-800">
                <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Succeeded</div>
                <div class="text-2xl font-semibold text-emerald-400">{{ qs.succeeded|format_number_i64 }}</div>
            </div>
            <div class="bg-gray-900 rounded-lg p-4 border border-gray-800">
                <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Failed</div>
                <div class="text-2xl font-semibold text-red-400">{{ qs.failed|format_number_i64 }}</div>
            </div>
            <div class="bg-gray-900 rounded-lg p-4 border border-gray-800">
                <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Panicked</div>
                <div class="text-2xl font-semibold text-orange-400">{{ qs.panicked|format_number_i64 }}</div>
            </div>
            <div class="bg-gray-900 rounded-lg p-4 border border-gray-800">
                <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Latency</div>
                <div class="text-2xl font-semibold text-yellow-400">{{ qs.latency_s|format_latency }}</div>
            </div>
            <div class="bg-gray-900 rounded-lg p-4 border border-gray-800">
                <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Processed/min</div>
                <div class="text-2xl font-semibold text-cyan-400">{{ qs.rate.processed_per_minute|format_rate_per_minute }}</div>
            </div>
            <div class="bg-gray-900 rounded-lg p-4 border border-gray-800">
                <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Succeeded/min</div>
                <div class="text-2xl font-semibold text-emerald-400">{{ qs.rate.succeeded_per_minute|format_rate_per_minute }}</div>
            </div>
            <div class="bg-gray-900 rounded-lg p-4 border border-gray-800">
                <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Failed/min</div>
                <div class="text-2xl font-semibold text-red-400">{{ qs.rate.failed_per_minute|format_rate_per_minute }}</div>
            </div>
            <div class="bg-gray-900 rounded-lg p-4 border border-gray-800">
                <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">Growth/min</div>
                <div class="text-2xl font-semibold text-orange-400">{{ qs.rate.growth_per_minute|format_signed_rate_per_minute }}</div>
            </div>
            <div class="bg-gray-900 rounded-lg p-4 border border-gray-800">
                <div class="text-xs text-gray-400 uppercase tracking-wide mb-1">ETA</div>
                <div class="text-2xl font-semibold text-yellow-400">{{ qs.rate.eta_s|format_eta_s }}</div>
            </div>
        </div>
        {% when None %}
        {% endmatch %}

        {% if !active_jobs.is_empty() %}
        <section class="mb-8">
            <h2 class="text-lg font-semibold mb-4">Currently Processing ({{ active_jobs.len() }})</h2>
            <div class="space-y-3">
                {% for item in &active_jobs %}
                <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-4 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">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 %}
                    <details class="mt-3">
                        <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>
                    {% 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 %}
                    <details class="mt-3">
                        <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>
                    {% endif %}
                    {% endif %}
                    {% when None %}
                    {% endmatch %}
                    <div class="mt-3 flex justify-end">
                        <form method="POST" action="{{ base_path }}/queues/{{ queue_key|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>
        </section>
        {% endif %}

        <div class="flex items-center justify-between mb-4">
            <div>
                <h2 class="text-lg font-semibold">Enqueued</h2>
                <div class="mt-1 text-sm text-gray-400">
                {% if total > 0 %}
                {{ self.range_start() }}&ndash;{{ self.range_end() }} of {{ total }} jobs
                {% else %}
                0 jobs
                {% endif %}
                </div>
            </div>
            <div class="flex items-center gap-2 text-sm">
                {% if page > 1 %}
                <a href="?page={{ page - 1 }}" class="px-3 py-1 rounded bg-gray-800 border border-gray-700 hover:bg-gray-700 text-gray-300">&larr; Prev</a>
                {% else %}
                <span class="px-3 py-1 rounded bg-gray-900 border border-gray-800 text-gray-600 cursor-not-allowed">&larr; Prev</span>
                {% endif %}
                {% if has_next %}
                <a href="?page={{ page + 1 }}" class="px-3 py-1 rounded bg-gray-800 border border-gray-700 hover:bg-gray-700 text-gray-300">Next &rarr;</a>
                {% else %}
                <span class="px-3 py-1 rounded bg-gray-900 border border-gray-800 text-gray-600 cursor-not-allowed">Next &rarr;</span>
                {% endif %}
            </div>
        </div>

        {% if jobs.is_empty() %}
        <div class="bg-gray-900 border border-gray-800 rounded-lg p-6 text-center text-gray-500">
            No jobs in this queue
        </div>
        {% else %}
        <div class="space-y-3">
            {% for job in &jobs %}
            <div class="bg-gray-900 border border-gray-800 rounded-lg p-4">
                <div class="flex items-start justify-between mb-2">
                    <span class="font-semibold text-sm">{{ job.job.name }}</span>
                    <a href="{{ base_path }}/jobs/{{ job.id|urlencode_strict }}" class="text-xs text-gray-500 hover:text-blue-300 hover:underline font-mono">{{ job.id }}</a>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs text-gray-400 mt-2">
                    <div>
                        <span class="text-gray-500">Retries:</span>
                        <span class="ml-1 text-gray-300">{{ job.meta.retries }}</span>
                    </div>
                    <div>
                        <span class="text-gray-500">Created:</span>
                        <span class="ml-1 text-gray-300">{{ job.meta.created_at|relative_time_micros }}</span>
                    </div>
                    <div>
                        <span class="text-gray-500">Scheduled:</span>
                        <span class="ml-1 text-gray-300">{{ job.meta.scheduled_at|relative_time_micros }}</span>
                    </div>
                </div>
                {% let arg_pills = job.job.args|simple_args %}
                {% include "_arg_pills.html" %}
                {% if job.job.args|show_args_json %}
                <details class="mt-3" open>
                    <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">{{ job.job.args|pretty_json }}</pre>
                </details>
                {% endif %}
                {% match job.meta.state %}
                {% when Some with (state) %}
                {% if state|has_args %}
                {% if state|show_job_progress %}
                {% let progress_started_at = job.meta.started_at %}
                {% include "_job_progress.html" %}
                {% else %}
                <details class="mt-3">
                    <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>
                {% endif %}
                {% endif %}
                {% when None %}
                {% endmatch %}
                <div class="mt-3 flex justify-end">
                    <form method="POST" action="{{ base_path }}/queues/{{ queue_key|urlencode }}/jobs/{{ job.id|urlencode_strict }}/delete" onsubmit="return confirmDeleteJob('{{ job.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>

        <div class="flex items-center justify-between mt-6 text-sm">
            <span class="text-gray-500">{{ self.range_start() }}&ndash;{{ self.range_end() }} of {{ total }}</span>
            <div class="flex items-center gap-2">
                {% if page > 1 %}
                <a href="?page={{ page - 1 }}" class="px-3 py-1 rounded bg-gray-800 border border-gray-700 hover:bg-gray-700 text-gray-300">&larr; Prev</a>
                {% endif %}
                {% if has_next %}
                <a href="?page={{ page + 1 }}" class="px-3 py-1 rounded bg-gray-800 border border-gray-700 hover:bg-gray-700 text-gray-300">Next &rarr;</a>
                {% endif %}
            </div>
        </div>
        {% endif %}
    </div>
    <script>
        function promptConcurrency(form) {
            var current = form.dataset.currentConcurrency || '';
            var defaultConcurrency = form.dataset.defaultConcurrency || '';
            var queueKey = form.dataset.queueKey || 'queue';
            var promptText = 'Set concurrency for ' + queueKey;

            if (defaultConcurrency) {
                promptText += ' (default ' + defaultConcurrency + ')';
            }

            var input = prompt(promptText, current);
            if (input === null) {
                return false;
            }

            input = input.trim();
            if (!/^[1-9][0-9]*$/.test(input)) {
                alert('Concurrency must be a positive integer.');
                return false;
            }

            form.elements.concurrency.value = input;
            return true;
        }

        function confirmWipe(queueKey) {
            var input = prompt('Type the queue name to confirm wipe: ' + queueKey);
            return input === queueKey;
        }
        function confirmDeleteJob(jobId) {
            return confirm('Are you sure you want to delete job ' + jobId + '?');
        }
    </script>
</body>
</html>
