@extends('layouts.app')

@section('title', 'Login')

@section('content')
    <div class="mx-auto flex max-w-md flex-col justify-center px-4 py-20">
        <h1 class="text-3xl font-extrabold tracking-tight">Welcome back</h1>
        <p class="mt-2 text-sm text-slate-400">Log in to reach your saved prompts and member drops.</p>

        <form method="POST" action="{{ route('login') }}" class="surface mt-8 space-y-5 p-6">
            @csrf

            <div>
                <label for="email" class="label">Email</label>
                <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus
                       autocomplete="username" class="field">
                @error('email') <p class="mt-1.5 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>

            <div>
                <label for="password" class="label">Password</label>
                <input id="password" type="password" name="password" required autocomplete="current-password" class="field">
                @error('password') <p class="mt-1.5 text-xs text-rose-400">{{ $message }}</p> @enderror
            </div>

            <label class="flex items-center gap-2 text-sm text-slate-400">
                <input type="checkbox" name="remember" class="rounded border-ink-600 bg-ink-900 text-brand-500">
                Remember me
            </label>

            <button type="submit" class="btn btn-primary w-full py-3">Log in</button>

            <p class="text-center text-sm text-slate-400">
                No account yet?
                <a href="{{ route('register') }}" class="font-semibold text-brand-300 hover:text-brand-200">Get started</a>
            </p>
        </form>
    </div>
@endsection