{% extends "base.html" %}
{% load i18n %}

{% block content %}
  <div class="w-full h-full min-h-screen flex flex-col items-center justify-center p-4">
    <div class="text-center mb-8">
      <h1 class="text-5xl font-bold mb-4">{% trans "Welcome To" %} {{ SITE_NAME }}</h1>
      <p class="text-lg text-gray-600 dark:text-gray-400">{% trans "Version" %}: {{ VERSION }}</p>
    </div>

    {% if REQUEST_DETAILS %}
    <div class="w-full grid gap-6 grid-cols-1 md:grid-cols-2">
      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
        <h2 class="text-2xl font-semibold mb-4">{% trans "Request Headers" %}</h2>
        <pre class="bg-gray-100 dark:bg-gray-700 p-4 rounded text-sm text-gray-800 dark:text-gray-200 overflow-auto max-h-64">{{ REQUEST_DETAILS.headers|pprint }}</pre>
      </div>

      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
        <h2 class="text-2xl font-semibold mb-4">{% trans "Request Cookies" %}</h2>
        <pre class="bg-gray-100 dark:bg-gray-700 p-4 rounded text-sm text-gray-800 dark:text-gray-200 overflow-auto max-h-64">{{ REQUEST_DETAILS.cookies|pprint }}</pre>
      </div>

      <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6">
        <h2 class="text-2xl font-semibold mb-4">{% trans "Request Meta" %}</h2>
        <pre class="bg-gray-100 dark:bg-gray-700 p-4 rounded text-sm text-gray-800 dark:text-gray-200 overflow-auto max-h-64">{{ REQUEST_DETAILS.meta|pprint }}</pre>
      </div>
    </div>
    {% endif %}
  </div>
{% endblock %}
