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

{% block title %}
    Version Information - Debug
{% 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">Version Information</h1>
            <p class="text-base-content/70">Application version and build details</p>
        </header>
        <!-- Version Details Card -->
        <div class="card bg-base-100 shadow-xl border border-base-200">
            <div class="card-body">
                <h2 class="card-title text-primary mb-6">Build Information</h2>
                <div class="grid md:grid-cols-2 gap-6">
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center">
                            <svg class="w-6 h-6 text-primary"
                                 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>
                            <h3 class="font-semibold text-base-content">Version</h3>
                            <p class="text-2xl font-bold text-primary">{{ version }}</p>
                        </div>
                    </div>
                    <div class="flex items-center gap-4">
                        <div class="w-12 h-12 bg-secondary/10 rounded-full flex items-center justify-center">
                            <svg class="w-6 h-6 text-secondary"
                                 fill="none"
                                 stroke="currentColor"
                                 viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4V2a1 1 0 011-1h4a1 1 0 011 1v2m3 6V8a1 1 0 00-1-1H9a1 1 0 00-1 1v2m0 0v10a1 1 0 001 1h6a1 1 0 001-1V10H8z">
                                </path>
                            </svg>
                        </div>
                        <div>
                            <h3 class="font-semibold text-base-content">Version Hash</h3>
                            <p class="text-sm font-mono text-secondary bg-secondary/10 px-2 py-1 rounded">{{ v_hash }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Debug Navigation Footer -->
        {% include "debug/components/debug_nav.html.jinja" %}

    </div>
{% endblock body %}