@layouts.main({ title: 'Sign In — Imago Vault' })
  @slot('main')
    <div class="min-h-screen flex items-center justify-center px-4">
      <div class="w-full max-w-md">

        {{-- Logo / heading --}}
        <div class="text-center mb-8">
          <div class="inline-flex items-center justify-center w-16 h-16 bg-indigo-600 rounded-2xl mb-4 shadow-lg">
            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
            </svg>
          </div>
          <h1 class="text-2xl font-bold text-white">Imago Vault</h1>
          <p class="text-gray-400 text-sm mt-1">Sign in to manage your media files</p>
        </div>

        {{-- Credential error message --}}
        @if(flashMessages.has('errors'))
          <div class="bg-red-900/40 border border-red-700 text-red-300 px-4 py-3 rounded-lg mb-6 text-sm">
            {{ flashMessages.get('errors').form ?? 'An error occurred.' }}
          </div>
        @end

        {{-- Login form --}}
        <form method="POST" action="/login"
              class="bg-gray-900 rounded-2xl p-8 shadow-2xl border border-gray-800">
          {{ csrfField() }}

          <div class="mb-5">
            <label for="username" class="block text-sm font-medium text-gray-300 mb-2">
              Username
            </label>
            <input
              type="text"
              id="username"
              name="username"
              value="{{ flashMessages.get('username') ?? '' }}"
              required
              autocomplete="username"
              class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white
                     placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500
                     focus:border-transparent transition"
              placeholder="admin"
            />
          </div>

          <div class="mb-6">
            <label for="password" class="block text-sm font-medium text-gray-300 mb-2">
              Password
            </label>
            <input
              type="password"
              id="password"
              name="password"
              required
              autocomplete="current-password"
              class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white
                     placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500
                     focus:border-transparent transition"
              placeholder="••••••••"
            />
          </div>

          <button
            type="submit"
            class="w-full py-3 px-6 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold
                   rounded-lg transition duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-400"
          >
            Sign in
          </button>
        </form>

      </div>
    </div>
  @endslot
@end