{% extends 'template/template.j2.html' %}
{% block title %}
{{ $t('sidebar.authExample') }}
{% endblock %}
{% block content %}
<div class="space-y-6">
  <!-- Page Header -->
  <div class="flex items-center gap-3">
    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-lg">
      <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-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
      </svg>
    </div>
    <div>
      <h1 class="text-2xl font-bold text-gray-800">{{ $t('auth.test') }}</h1>
      <p class="text-sm text-gray-600">{{ $t('Authentication example page') }}</p>
    </div>
  </div>

  <!-- Welcome Card -->
  <div class="overflow-hidden rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-white shadow-lg">
    <div class="flex items-center gap-4 p-6">
      <div class="flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 text-white shadow-md">
        <svg class="h-7 w-7" 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>
      </div>
      <div class="flex-1">
        <p class="text-sm text-gray-600">{{ $t('auth.welcome') }}</p>
        <p class="text-xl font-bold text-blue-700">{{ user.name }}</p>
      </div>
    </div>
  </div>

  <!-- Logout Button -->
  <div>
    <a href="/logout" class="wave group inline-flex items-center gap-2 rounded-lg bg-gradient-to-r from-rose-600 to-rose-700 px-6 py-3 text-sm font-semibold text-white shadow-lg transition-all duration-200 hover:from-rose-700 hover:to-rose-800 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-rose-500/30">
      <svg class="h-5 w-5 transition-transform duration-200 group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
      </svg>
      <span>{{ $t('auth.logout') }}</span>
    </a>
  </div>

  <!-- File References 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">
      <h3 class="text-lg font-bold text-gray-800">{{ $t('File References') }}</h3>
      <p class="text-sm text-gray-600">{{ $t('Related files for this authentication example') }}</p>
    </div>
    <ul class="divide-y divide-gray-100">
      <li class="group transition-colors duration-150 hover:bg-blue-50">
        <div class="flex flex-col gap-2 p-4 md:flex-row md:items-center md:gap-4">
          <div class="flex items-center gap-2 md:w-48">
            <svg class="h-5 w-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
            </svg>
            <span class="font-semibold text-gray-700">{{ $t('auth.view') }}</span>
          </div>
          <code class="rounded-md bg-gray-100 px-3 py-1 text-xs text-blue-700 group-hover:bg-blue-100">example/lib/widgets/example/auth.j2.html</code>
        </div>
      </li>
      <li class="group transition-colors duration-150 hover:bg-blue-50">
        <div class="flex flex-col gap-2 p-4 md:flex-row md:items-center md:gap-4">
          <div class="flex items-center gap-2 md:w-48">
            <svg class="h-5 w-5 text-purple-600" 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>
            <span class="font-semibold text-gray-700">{{ $t('auth.controller') }}</span>
          </div>
          <code class="rounded-md bg-gray-100 px-3 py-1 text-xs text-purple-700 group-hover:bg-blue-100">example/lib/controllers/home_controller.dart</code>
        </div>
      </li>
      <li class="group transition-colors duration-150 hover:bg-blue-50">
        <div class="flex flex-col gap-2 p-4 md:flex-row md:items-center md:gap-4">
          <div class="flex items-center gap-2 md:w-48">
            <svg class="h-5 w-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
            </svg>
            <span class="font-semibold text-gray-700">{{ $t('auth.authController') }}</span>
          </div>
          <code class="rounded-md bg-gray-100 px-3 py-1 text-xs text-green-700 group-hover:bg-blue-100">example/lib/controllers/auth_controller.dart</code>
        </div>
      </li>
      <li class="group transition-colors duration-150 hover:bg-blue-50">
        <div class="flex flex-col gap-2 p-4 md:flex-row md:items-center md:gap-4">
          <div class="flex items-center gap-2 md:w-48">
            <svg class="h-5 w-5 text-orange-600" 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>
            <span class="font-semibold text-gray-700">{{ $t('auth.router') }}</span>
          </div>
          <code class="rounded-md bg-gray-100 px-3 py-1 text-xs text-orange-700 group-hover:bg-blue-100">example/lib/route/web_route.dart</code>
        </div>
      </li>
    </ul>
  </div>
</div>
{% endblock %}