@extends('layouts.auth')

@section('title', 'Sign in')

@section('content')

    <h1 class="font-display text-3xl tracking-tight text-slate-900">Sign in</h1>
    <p class="mt-2 text-sm text-slate-600">Welcome back. Continue where you left off.</p>

    @if ($errors->any())
        <x-alert type="danger" class="mt-6">
            {{ $errors->first() }}
        </x-alert>
    @endif

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

        <x-input name="email" type="email" label="Email address" required
                 :value="old('email')" autocomplete="email" autofocus />

        <x-input name="password" type="password" label="Password" required
                 autocomplete="current-password" />

        <div class="flex items-center justify-between">
            <label class="flex items-center gap-2 text-sm text-slate-600">
                <input type="checkbox" name="remember" value="1"
                       class="h-4 w-4 rounded border-slate-300 text-brand-700 focus:ring-brand-700">
                Remember me
            </label>

            <a href="{{ route('password.request') }}" class="text-sm font-medium text-brand-700 hover:underline">
                Forgot password?
            </a>
        </div>

        <x-button type="submit" size="lg" class="w-full">Sign In</x-button>
    </form>

    <p class="mt-6 text-center text-sm text-slate-600">
        New applicant?
        <a href="{{ route('register') }}" class="font-medium text-brand-700 hover:underline">Create an account</a>
    </p>

@endsection
