@extends('layouts.unauthenticated-tamplate')

@section('form')
    <form class="px-8 pb-10 space-y-6" action="{{ route('home') }}">
        <div class="space-y-1">
            <label class="text-xs font-semibold text-slate-600 dark:text-slate-400 uppercase tracking-wider ml-1"
                for="username">
                Usuario o correo
            </label>
            <div class="relative">
                <span class="material-icons absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xl">person</span>
                <input
                    class="w-full pl-11 pr-4 py-3 bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent text-slate-900 dark:text-slate-100 transition-all outline-none"
                    id="username" placeholder="Ej. admin@taxi.com" type="text" />
            </div>
        </div>
        <div class="space-y-1">
            <label class="text-xs font-semibold text-slate-600 dark:text-slate-400 uppercase tracking-wider ml-1"
                for="password">
                Contraseña
            </label>
            <div class="relative">
                <span class="material-icons absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xl">lock</span>
                <input
                    class="w-full pl-11 pr-12 py-3 bg-slate-50 dark:bg-slate-800 border-slate-200 dark:border-slate-700 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent text-slate-900 dark:text-slate-100 transition-all outline-none"
                    id="password" placeholder="••••••••" type="password" />
                <button class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
                    type="button">
                    <span class="material-icons text-xl">visibility_off</span>
                </button>
            </div>
        </div>
        <div class="flex items-center justify-between">
            <label class="flex items-center text-sm text-slate-600 dark:text-slate-400 cursor-pointer">
                <input class="w-4 h-4 rounded text-primary border-slate-300 focus:ring-primary mr-2" type="checkbox" />
                Recordarme
            </label>
            <a class="text-sm font-medium text-primary hover:underline" href="#">
                Recuperar acceso
            </a>
        </div>
        <button
            class="w-full py-4 bg-primary hover:bg-primary/90 text-white font-bold rounded-lg shadow-lg shadow-primary/30 transition-all transform active:scale-[0.98]"
            type="submit">
            Iniciar Sesión
        </button>
    </form>
@endsection