{% extends "base/skeleton.html.jinja" %}
{% block title %}
    Task queue unavailable - Debug
{% endblock title %}
{% block body %}
    <div class="container mx-auto px-4 py-8 max-w-3xl">
        <header class="mb-8">
            <h1 class="text-4xl font-bold text-base-content mb-2">Task queue unavailable</h1>
            <p class="text-base-content/70">
                The Streaq debug UI did not respond within {{ timeout_seconds }} seconds and the request was cancelled.
            </p>
        </header>
        <div class="alert alert-warning mb-6">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z">
                </path>
            </svg>
            <span>
                <strong>{{ path }}</strong> took longer than {{ timeout_seconds }}s. This usually means the
                worker is down, Redis is unreachable, or the installed Streaq build is incompatible with the
                Redis schema this app expects.
            </span>
        </div>
        <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
            <div class="card-body">
                <h2 class="card-title text-primary mb-4">Checklist</h2>
                <ul class="space-y-3">
                    <li class="flex gap-3">
                        <span class="badge badge-primary badge-sm mt-1">1</span>
                        <div>
                            <p class="font-semibold">Is a worker running?</p>
                            <p class="text-sm text-base-content/70">
                                Start it with
                                <code class="bg-base-200 px-1.5 py-0.5 rounded">just worker-dev</code>
                                or run server and worker together with
                                <code class="bg-base-200 px-1.5 py-0.5 rounded">just local-all-with-worker</code>.
                            </p>
                        </div>
                    </li>
                    <li class="flex gap-3">
                        <span class="badge badge-primary badge-sm mt-1">2</span>
                        <div>
                            <p class="font-semibold">Is Redis reachable?</p>
                            <p class="text-sm text-base-content/70">
                                The Streaq UI walks Redis with <code class="bg-base-200 px-1.5 py-0.5 rounded">SCAN</code>;
                                a missing or saturated Redis hangs the page. Verify your <code class="bg-base-200 px-1.5 py-0.5 rounded">REDIS_URL</code>
                                and that the instance is accepting connections.
                            </p>
                        </div>
                    </li>
                    <li class="flex gap-3">
                        <span class="badge badge-primary badge-sm mt-1">3</span>
                        <div>
                            <p class="font-semibold">Is the installed Streaq compatible?</p>
                            <p class="text-sm text-base-content/70">
                                A Streaq version mismatch can make
                                <code class="bg-base-200 px-1.5 py-0.5 rounded">/queue</code> and
                                <code class="bg-base-200 px-1.5 py-0.5 rounded">/workers</code> hang on
                                Redis keys they cannot parse. Pin to the version blessed by this vibetuner
                                release if you have overridden it locally.
                            </p>
                        </div>
                    </li>
                </ul>
                <div class="card-actions justify-end mt-6">
                    <a href="{{ path }}" class="btn btn-primary gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
                            </path>
                        </svg>
                        Retry
                    </a>
                </div>
            </div>
        </div>
        {% include "debug/components/debug_nav.html.jinja" %}
    </div>
{% endblock body %}