{% extends 'template/template.j2.html' %}

{% block title %}
    {{ $t('sidebar.home') }}
{% endblock %}

{% block content %}
<div class="space-y-8">
  <!-- Hero Section -->
  <div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500 via-blue-600 to-indigo-700 p-8 shadow-xl lg:p-12">
    <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4xIj48cGF0aCBkPSJNMzYgMzRoLTJWMzJoMnptMCAyaC0ydjJoMnptMi0yaDJ2Mmgtem0wLTJoMnYyaC0yem0tMi0yaC0ydjJoMnptMi0yaDJ2Mmgtenz0iLz48L2c+PC9nPjwvc3ZnPg==')] opacity-20"></div>
    <div class="relative">
      <div dir="ltr" class="flex flex-col items-center justify-center gap-6 text-center lg:flex-row lg:text-left">
        <div class="flex h-24 w-24 items-center justify-center rounded-2xl bg-white/20 shadow-lg backdrop-blur-sm ring-4 ring-white/30">
          <img
            src="{{ $e.url('logo.svg') }}"
            alt="{{ $t('logo.title') }}"
            class="h-full w-full object-contain drop-shadow-2xl"
          />
        </div>
        <div class="flex flex-col justify-center">
          <h1 style="font-size: 2.5rem;" class="font-black text-white drop-shadow-lg">{{ $t('logo') }}</h1>
          <p class="mt-2 text-sm font-medium tracking-wider text-blue-100">{{ $t('Version') }} {{ version }}</p>
        </div>
      </div>
    </div>
  </div>

  {% if loginResult != true %}
  <!-- Features Card -->
  <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-lg">
    <div class="border-b border-gray-200 bg-gradient-to-r from-gray-50 to-white px-6 py-4">
      <h2 class="text-2xl font-bold text-gray-800">{{ $t('features.title') }}</h2>
      <p class="mt-2 text-sm text-gray-600">
        {{ $t('features.description') }}
      </p>
    </div>

    <div class="p-6">
      <ul class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        <li class="flex items-start gap-3 rounded-lg border border-blue-100 bg-blue-50/50 p-4 transition-all duration-200 hover:border-blue-300 hover:shadow-md">
          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-600 text-white shadow-sm">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-gray-700">{{ $t('features.websocket') }}</span>
        </li>
        <li class="flex items-start gap-3 rounded-lg border border-green-100 bg-green-50/50 p-4 transition-all duration-200 hover:border-green-300 hover:shadow-md">
          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-green-600 text-white shadow-sm">
            <svg class="h-5 w-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>
          </div>
          <span class="text-sm font-medium text-gray-700">{{ $t('features.mongodb') }}</span>
        </li>
        <li class="flex items-start gap-3 rounded-lg border border-purple-100 bg-purple-50/50 p-4 transition-all duration-200 hover:border-purple-300 hover:shadow-md">
          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-purple-600 text-white shadow-sm">
            <svg class="h-5 w-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>
          </div>
          <span class="text-sm font-medium text-gray-700">{{ $t('features.cronjobs') }}</span>
        </li>
        <li class="flex items-start gap-3 rounded-lg border border-blue-100 bg-blue-50/50 p-4 transition-all duration-200 hover:border-blue-300 hover:shadow-md">
          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-blue-600 text-white shadow-sm">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-gray-700">{{ $t('features.routing') }}</span>
        </li>
        <li class="flex items-start gap-3 rounded-lg border border-amber-100 bg-amber-50/50 p-4 transition-all duration-200 hover:border-amber-300 hover:shadow-md">
          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-600 text-white shadow-sm">
            <svg class="h-5 w-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>
          </div>
          <span class="text-sm font-medium text-gray-700">{{ $t('features.formvalidators') }}</span>
        </li>
        <li class="flex items-start gap-3 rounded-lg border border-indigo-100 bg-indigo-50/50 p-4 transition-all duration-200 hover:border-indigo-300 hover:shadow-md">
          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-indigo-600 text-white shadow-sm">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-gray-700">{{ $t('features.htmltools') }}</span>
        </li>
        <li class="flex items-start gap-3 rounded-lg border border-teal-100 bg-teal-50/50 p-4 transition-all duration-200 hover:border-teal-300 hover:shadow-md">
          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-teal-600 text-white shadow-sm">
            <svg class="h-5 w-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-4V7"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-gray-700">{{ $t('features.dbmodel') }}</span>
        </li>
        <li class="flex items-start gap-3 rounded-lg border border-rose-100 bg-rose-50/50 p-4 transition-all duration-200 hover:border-rose-300 hover:shadow-md">
          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-rose-600 text-white shadow-sm">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-gray-700">{{ $t('features.fastapi') }}</span>
        </li>
        <li class="flex items-start gap-3 rounded-lg border border-gray-200 bg-gray-50/50 p-4 transition-all duration-200 hover:border-gray-300 hover:shadow-md">
          <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-600 text-white shadow-sm">
            <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-gray-700">{{ $t('features.other') }}</span>
        </li>
      </ul>

      <!-- Action Buttons -->
      <div class="mt-8 flex flex-wrap gap-3" role="group" aria-label="Quick links">
        <a
          href="https://github.com/uproid/finch"
          class="wave group inline-flex items-center gap-2 rounded-lg border-2 border-blue-600 bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white shadow-md transition-all duration-200 hover:bg-blue-700 hover:border-blue-700 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-blue-500/30"
        >
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
          </svg>
          <span>{{ $t('project.github') }}</span>
        </a>
        <a
          href="https://github.com/uproid/finch/blob/master/CONTRIBUTING.md"
          class="wave inline-flex items-center gap-2 rounded-lg border-2 border-blue-600 bg-white px-5 py-2.5 text-sm font-semibold text-blue-700 shadow-md transition-all duration-200 hover:bg-blue-50 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-blue-500/30"
        >
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
          </svg>
          <span>{{ $t('project.contributing') }}</span>
        </a>
        <a
          href="https://github.com/uproid/finch/tree/master/doc"
          class="wave inline-flex items-center gap-2 rounded-lg border-2 border-blue-600 bg-white px-5 py-2.5 text-sm font-semibold text-blue-700 shadow-md transition-all duration-200 hover:bg-blue-50 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-blue-500/30"
        >
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
          </svg>
          <span>{{ $t('project.documentation') }}</span>
        </a>
        <a
          href="https://pub.dev/packages/finch"
          class="wave inline-flex items-center gap-2 rounded-lg border-2 border-blue-600 bg-white px-5 py-2.5 text-sm font-semibold text-blue-700 shadow-md transition-all duration-200 hover:bg-blue-50 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-blue-500/30"
        >
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
          </svg>
          <span>{{ $t('project.pubdev') }}</span>
        </a>
      </div>
    </div>
  </div>
  {% else %}
  <div class="flex items-start gap-4 rounded-xl border border-emerald-300 bg-gradient-to-r from-emerald-50 to-green-50 p-6 shadow-lg">
    <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-600 text-white shadow-md">
      <svg class="h-6 w-6" 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>
    </div>
    <div class="flex-1">
      <h3 class="text-lg font-semibold text-emerald-900">{{ $t('login.success') }}</h3>
      <p class="mt-1 text-sm text-emerald-700">You have successfully logged in!</p>
    </div>
  </div>
  {% endif %}
</div>
{% endblock %}