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

{% block title %}
    System Information - Debug
{% endblock title %}
{% block body %}
    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <!-- Header -->
        <header class="mb-8">
            <h1 class="text-4xl font-bold text-base-content mb-2">System Information</h1>
            <p class="text-base-content/70">Application configuration, runtime details, and session data</p>
        </header>
        <!-- Stats Overview -->
        <div class="stats stats-vertical sm:stats-horizontal shadow-xl border border-base-200 mb-8 w-full">
            <div class="stat">
                <div class="stat-figure text-primary">
                    <svg class="w-8 h-8" 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>
                </div>
                <div class="stat-title">Version</div>
                <div class="stat-value text-primary">{{ version }}</div>
                <div class="stat-desc">Build {{ v_hash[:8] }}</div>
            </div>
            <div class="stat">
                <div class="stat-figure text-secondary">
                    <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129">
                        </path>
                    </svg>
                </div>
                <div class="stat-title">Languages</div>
                <div class="stat-value text-secondary">{{ supported_languages | length }}</div>
                <div class="stat-desc">{{ default_language }} default</div>
            </div>
            <div class="stat">
                <div class="stat-figure">
                    {% if DEBUG %}
                        <div class="badge badge-warning gap-1">
                            <svg class="w-3 h-3" 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>
                            DEBUG
                        </div>
                    {% else %}
                        <div class="badge badge-success gap-1">
                            <svg class="w-3 h-3" 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>
                            PROD
                        </div>
                    {% endif %}
                </div>
                <div class="stat-title">Mode</div>
                <div class="stat-value">{{ "Debug" if DEBUG else "Production" }}</div>
                <div class="stat-desc">{{ "Development" if DEBUG else "Live" }} environment</div>
            </div>
        </div>
        <!-- Project Configuration -->
        <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
            <div class="card-body">
                <h2 class="card-title text-primary flex items-center gap-2 mb-6">
                    <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>
                    Project Configuration
                </h2>
                <div class="overflow-x-auto">
                    <table class="table table-zebra">
                        <thead>
                            <tr>
                                <th class="font-bold">Setting</th>
                                <th class="font-bold">Value</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <div class="flex items-center gap-2">
                                        <div class="badge badge-ghost font-mono">Project Name</div>
                                    </div>
                                </td>
                                <td>
                                    <code class="text-sm bg-base-200 px-2 py-1 rounded">{{ project_name }}</code>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="flex items-center gap-2">
                                        <div class="badge badge-ghost font-mono">Project Slug</div>
                                    </div>
                                </td>
                                <td>
                                    <code class="text-sm bg-base-200 px-2 py-1 rounded">{{ project_slug }}</code>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="flex items-center gap-2">
                                        <div class="badge badge-ghost font-mono">Description</div>
                                    </div>
                                </td>
                                <td>
                                    <span class="text-sm">{{ project_description }}</span>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="flex items-center gap-2">
                                        <div class="badge badge-ghost font-mono">Copyright</div>
                                    </div>
                                </td>
                                <td>
                                    <span class="text-sm">{{ copyright }}</span>
                                </td>
                            </tr>
                            {% if umami_website_id %}
                                <tr>
                                    <td>
                                        <div class="flex items-center gap-2">
                                            <div class="badge badge-ghost font-mono">Umami Website ID</div>
                                        </div>
                                    </td>
                                    <td>
                                        <code class="text-xs bg-base-200 px-2 py-1 rounded break-all">{{ umami_website_id }}</code>
                                    </td>
                                </tr>
                            {% endif %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- Runtime Information -->
        <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
            <div class="card-body">
                <h2 class="card-title text-secondary flex items-center gap-2 mb-6">
                    <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 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z">
                        </path>
                    </svg>
                    Runtime Information
                </h2>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">Current Language</span>
                        </label>
                        <div class="flex gap-2">
                            <div class="badge badge-primary badge-lg">{{ language }}</div>
                        </div>
                    </div>
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">Debug Status</span>
                        </label>
                        <div class="flex items-center gap-3">
                            {% if DEBUG %}
                                <div class="badge badge-warning 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="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>
                                    Debug Mode Active
                                </div>
                            {% else %}
                                <div class="badge badge-success 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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z">
                                        </path>
                                    </svg>
                                    Production Mode
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="form-control md:col-span-2">
                        <label class="label">
                            <span class="label-text font-medium">Supported Languages</span>
                        </label>
                        <div class="flex flex-wrap gap-2">
                            {% for lang in supported_languages %}
                                <div class="badge badge-outline {{ 'badge-primary' if lang == default_language else '' }}">
                                    {{ lang }}
                                    {% if lang == default_language %}
                                        <svg class="w-3 h-3 ml-1"
                                             fill="none"
                                             stroke="currentColor"
                                             viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                        </svg>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- User Cookies -->
        <div class="card bg-base-100 shadow-xl border border-base-200">
            <div class="card-body">
                <h2 class="card-title text-accent flex items-center gap-2 mb-6">
                    <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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
                        </path>
                    </svg>
                    User Cookies
                    <div class="badge badge-neutral">{{ cookies | length if cookies else 0 }}</div>
                </h2>
                {% if cookies %}
                    <div class="overflow-x-auto">
                        <table class="table table-zebra">
                            <thead>
                                <tr>
                                    <th class="font-bold">Cookie Name</th>
                                    <th class="font-bold">Value</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for name, value in cookies.items() %}
                                    <tr>
                                        <td>
                                            <div class="flex items-center gap-2">
                                                <div class="badge badge-ghost font-mono">{{ name }}</div>
                                            </div>
                                        </td>
                                        <td>
                                            <code class="text-xs bg-base-200 px-2 py-1 rounded break-all">{{ value[:50] }}
                                                {% if value|length > 50 %}...{% endif %}
                                            </code>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="alert alert-info">
                        <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
                            </path>
                        </svg>
                        <span>No cookies found in the current session</span>
                    </div>
                {% endif %}
            </div>
        </div>
        <!-- Debug Navigation Footer -->
        {% include "debug/components/debug_nav.html.jinja" %}

    </div>
{% endblock body %}