@extends('layouts.auth')

@section('content')
    <div class="mb-6">
        <h1 class="text-2xl font-semibold tracking-tight text-white">Welcome back</h1>
        <p class="mt-2 text-sm text-slate-400">Sign in to manage your private webhook endpoints.</p>
    </div>

    @if ($errors->any())
        <div class="mb-5 rounded-xl border border-rose-300/20 bg-rose-300/10 px-4 py-3 text-sm text-rose-200">{{ $errors->first() }}</div>
    @endif

    <form action="{{ route('login') }}" method="POST" class="space-y-5">
        @csrf
        <div>
            <label for="email" class="text-sm font-medium text-slate-200">Email</label>
            <input id="email" name="email" type="email" value="{{ old('email') }}" required autofocus autocomplete="email" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none placeholder:text-slate-600 focus:border-cyan-300/60 focus:ring-2 focus:ring-cyan-300/20">
        </div>
        <div>
            <div class="flex items-center justify-between gap-4">
                <label for="password" class="text-sm font-medium text-slate-200">Password</label>
                @if (Route::has('password.request'))
                    <a href="{{ route('password.request') }}" class="text-xs text-cyan-300 hover:text-cyan-200">Forgot password?</a>
                @endif
            </div>
            <input id="password" name="password" type="password" required autocomplete="current-password" class="mt-2 w-full rounded-xl border border-white/10 bg-slate-950/70 px-4 py-3 text-sm text-white outline-none focus:border-cyan-300/60 focus:ring-2 focus:ring-cyan-300/20">
        </div>
        <label class="flex items-center gap-3 text-sm text-slate-400">
            <input name="remember" type="checkbox" value="1" class="size-4 rounded border-white/20 bg-slate-900 text-cyan-400 focus:ring-cyan-300/30">
            Remember me
        </label>
        <button type="submit" class="w-full rounded-xl bg-cyan-400 px-4 py-3 font-semibold text-slate-950 transition hover:bg-cyan-300">Log in</button>
    </form>

    <p class="mt-6 text-center text-sm text-slate-500">No account? <a href="{{ route('register') }}" class="text-cyan-300 hover:text-cyan-200">Create one</a></p>
@endsection