@extends('layouts.app')

@section('title', 'Login')

@section('content')
    <div class="animate-fade-in" style="animation-delay: 0.3s;">
        <x-section.card title="Login Admin" subtitle="Hanya untuk admin registrasi!">
            <form action="{{ route('login') }}" method="POST" class="space-y-6">
                @csrf

                <div class="space-y-2">
                    <label class="block text-sm font-medium text-white/90">Username</label>
                    <input type="text"
                           name="username"
                           placeholder="Username"
                           value="{{ old('username') }}"
                           class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-transparent transition-all-smooth backdrop-blur-sm"
                           autofocus
                           required>
                </div>

                <div class="space-y-2">
                    <label for="password" class="block text-sm font-medium text-white/90">Password</label>
                    <input id="password"
                           type="password"
                           name="password"
                           placeholder="Password"
                           class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-transparent transition-all-smooth backdrop-blur-sm"
                           required />
                </div>

                @if ($errors->any())
                    <div class="bg-red-500/20 border border-red-500/30 rounded-lg p-3 text-red-100 text-sm backdrop-blur-sm animate-fade-in">
                        {{ $errors->first() }}
                    </div>
                @endif

                <button type="submit"
                        class="w-full bg-white/20 hover:bg-white hover:text-gray-800 text-white font-medium py-3 px-6 rounded-lg transition-all-smooth transform hover:scale-105 hover:shadow-lg backdrop-blur-sm border border-white/30">
                    <span class="flex items-center justify-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"></path>
                        </svg>
                        Masuk
                    </span>
                </button>
            </form>
        </x-section.card>
    </div>
@endsection