{% extends "base/skeleton.html.jinja" %}

{% block title %}
    Debug Dashboard
{% endblock title %}
{% block body %}
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- Header -->
        <header class="mb-8">
            <h1 class="text-4xl font-bold text-base-content mb-2">Debug Dashboard</h1>
            <p class="text-base-content/70">Development and debugging tools for {{ project_name }}</p>
        </header>
        <!-- Debug Tools Grid -->
        <div class="grid md:grid-cols-2 gap-6">
            <!-- System Information -->
            <div class="card bg-base-100 shadow-xl border border-base-200 hover:shadow-2xl transition-shadow">
                <div class="card-body">
                    <h2 class="card-title text-primary flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                            </path>
                        </svg>
                        System Information
                    </h2>
                    <p class="text-base-content/70 mb-4">View application configuration, cookies, and runtime information</p>
                    <div class="card-actions justify-end">
                        <a href="/debug/info" class="btn btn-primary btn-sm">View Details</a>
                    </div>
                </div>
            </div>
            <!-- Database Collections -->
            <div class="card bg-base-100 shadow-xl border border-base-200 hover:shadow-2xl transition-shadow">
                <div class="card-body">
                    <h2 class="card-title text-primary flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4">
                            </path>
                        </svg>
                        Database Collections
                    </h2>
                    <p class="text-base-content/70 mb-4">Explore MongoDB collections and their field schemas</p>
                    <div class="card-actions justify-end">
                        <a href="/debug/collections" class="btn btn-primary btn-sm">View Schemas</a>
                    </div>
                </div>
            </div>
            <!-- Version Information -->
            <div class="card bg-base-100 shadow-xl border border-base-200 hover:shadow-2xl transition-shadow">
                <div class="card-body">
                    <h2 class="card-title text-primary flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z">
                            </path>
                        </svg>
                        Version Information
                    </h2>
                    <p class="text-base-content/70 mb-4">Check application version and build information</p>
                    <div class="card-actions justify-end">
                        <a href="/debug/version" class="btn btn-primary btn-sm">View Version</a>
                    </div>
                </div>
            </div>
            <!-- Health Check -->
            <div class="card bg-base-100 shadow-xl border border-base-200 hover:shadow-2xl transition-shadow">
                <div class="card-body">
                    <h2 class="card-title text-success flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z">
                            </path>
                        </svg>
                        Health Check
                    </h2>
                    <p class="text-base-content/70 mb-4">Verify application health and API endpoint status</p>
                    <div class="card-actions justify-end">
                        <a href="/health/ping" class="btn btn-success btn-sm">Check Health</a>
                    </div>
                </div>
            </div>
            <!-- OAuth Provider Apps -->
            <div class="card bg-base-100 shadow-xl border border-base-200 hover:shadow-2xl transition-shadow">
                <div class="card-body">
                    <h2 class="card-title text-secondary flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z">
                            </path>
                        </svg>
                        OAuth Provider Apps
                    </h2>
                    <p class="text-base-content/70 mb-4">Manage OAuth app credentials per provider</p>
                    <div class="card-actions justify-end">
                        <a href="/debug/oauth-apps" class="btn btn-secondary btn-sm">Manage Apps</a>
                    </div>
                </div>
            </div>
            <!-- Runtime Configuration -->
            <div class="card bg-base-100 shadow-xl border border-base-200 hover:shadow-2xl transition-shadow">
                <div class="card-body">
                    <h2 class="card-title text-secondary flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
                            </path>
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                        </svg>
                        Runtime Configuration
                    </h2>
                    <p class="text-base-content/70 mb-4">View and manage runtime configuration values</p>
                    <div class="card-actions justify-end">
                        <a href="/debug/config" class="btn btn-secondary btn-sm">View Config</a>
                    </div>
                </div>
            </div>
            <!-- Template Blocks -->
            <div class="card bg-base-100 shadow-xl border border-base-200 hover:shadow-2xl transition-shadow">
                <div class="card-body">
                    <h2 class="card-title text-accent flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z">
                            </path>
                        </svg>
                        Template Blocks
                    </h2>
                    <p class="text-base-content/70 mb-4">Discover available skeleton blocks for template inheritance</p>
                    <div class="card-actions justify-end">
                        <a href="/debug/blocks" class="btn btn-accent btn-sm">View Blocks</a>
                    </div>
                </div>
            </div>
            <!-- Background Tasks -->
            <div class="card bg-base-100 shadow-xl border border-base-200 hover:shadow-2xl transition-shadow">
                <div class="card-body">
                    <h2 class="card-title text-primary flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z">
                            </path>
                        </svg>
                        Background Tasks
                    </h2>
                    <p class="text-base-content/70 mb-4">Inspect the Streaq queue, workers, scheduled crons, and task history</p>
                    <div class="card-actions justify-end">
                        <a href="/debug/tasks/" class="btn btn-primary btn-sm">View Queue</a>
                    </div>
                </div>
            </div>
            <!-- Users -->
            <div class="card bg-base-100 shadow-xl border border-base-200 hover:shadow-2xl transition-shadow">
                <div class="card-body">
                    <h2 class="card-title text-warning flex items-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z">
                            </path>
                        </svg>
                        Users
                    </h2>
                    <p class="text-base-content/70 mb-4">Browse all users and impersonate any account for testing</p>
                    <div class="card-actions justify-end">
                        <a href="/debug/users" class="btn btn-warning btn-sm">Browse Users</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Debug Navigation Footer -->
        {% include "debug/components/debug_nav.html.jinja" %}

    </div>
{% endblock body %}