{% extends 'template/template.j2.html' %}
{% block title %}
    {{ $t('sidebar.formExample') }}
{% 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
      </svg>
    </div>
    <div>
      <h1 class="text-2xl font-bold text-gray-800">{{ $t('form.validation.title') }}</h1>
      <p class="text-sm text-gray-600">{{ $t('Form validation example') }}</p>
    </div>
  </div>

  <!-- Credentials Info Card -->
  <div class="rounded-xl border border-blue-200 bg-gradient-to-r from-blue-50 to-white p-5 shadow-md">
    <div class="flex items-start gap-3">
      <div class="flex h-10 w-10 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 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
      </div>
      <div class="flex-1 text-sm">
        <p class="font-semibold text-gray-800">{{ $t('Test Credentials') }}</p>
        <p class="mt-2 text-gray-700"><span class="font-medium">{{ $t('form.validation.credentials.email') }}:</span> <code class="rounded bg-white px-2 py-0.5 text-blue-700">example@uproid.com</code></p>
        <p class="mt-1 text-gray-700"><span class="font-medium">{{ $t('form.validation.credentials.password') }}:</span> <code class="rounded bg-white px-2 py-0.5 text-blue-700">@Test123</code></p>
      </div>
    </div>
  </div>

  {% if loginResult != true and user == null %}
  <!-- Login Form 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('Login Form') }}</h3>
      <p class="text-sm text-gray-600">{{ $t('Enter your credentials to continue') }}</p>
    </div>
    <div class="p-6">
      {% include form_login.widget | unscape %}
    </div>
  </div>
  {% else %}
  <!-- Success Card -->
  <div class="overflow-hidden rounded-xl border border-emerald-300 bg-gradient-to-r from-emerald-50 to-green-50 shadow-lg">
    <div class="flex items-center justify-between gap-4 p-6">
      <div class="flex items-center gap-4">
        <div class="flex h-12 w-12 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>
          <p class="text-sm font-medium text-emerald-900">{{ $t('form.validation.loginSuccess') }}</p>
          <p class="mt-1 text-sm text-emerald-700">{{ $t('Logged in as') }} <span class="font-semibold">{{ user.name }}</span></p>
        </div>
      </div>
      <a href="{{ $e.routeUrl('root.logout') }}" class="wave inline-flex shrink-0 items-center gap-2 rounded-lg bg-gradient-to-r from-rose-600 to-rose-700 px-4 py-2.5 text-sm font-semibold text-white shadow-md transition-all duration-200 hover:from-rose-700 hover:to-rose-800 hover:shadow-lg focus:outline-none focus:ring-4 focus:ring-rose-500/30">
        <svg class="h-4 w-4" 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('form.validation.logout') }}</span>
      </a>
    </div>
  </div>
  {% endif %}

  <!-- 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 form 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('form.validation.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/form.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('form.validation.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>
    </ul>
  </div>
</div>
{% endblock %}