@extends('auth.layouts.app')
@section('title', 'Masuk | Career Development and Consultation (CDC)')
@section('content')
    <div class="d-flex flex-center flex-column flex-column-fluid">
        <div class="p-10 mx-auto w-lg-500px p-lg-15">
            <form action="{{ route('login') }}" method="POST" class="form w-100">
                @csrf
                <div class="mb-10 text-center">
                    <h1 class="mb-3 text-dark">Selamat Datang</h1>
                    <div class="text-gray-400 fw-bold fs-4">Belum punya akun?
                        <a href="{{ route('register') }}" class="link-primary fw-bolder">Buat akun</a>
                    </div>
                </div>
                <div class="mb-10 fv-row">
                    <label class="form-label fs-6 fw-bolder text-dark">Email</label>
                    <input class="form-control form-control-lg form-control-solid" type="email" :value="old('email')"
                        name="email" autocomplete="off" autofocus />
                    @error('email')
                        <div class="fv-plugins-message-container invalid-feedback">
                            <span>{{ $message }}</span>
                        </div>
                    @enderror
                </div>
                <div class="mb-10 fv-row">
                    <div class="mb-2 d-flex flex-stack">
                        <label class="mb-0 form-label fw-bolder text-dark fs-6">Password</label>
                        <a href="{{ route('password.request') }}" class="link-primary fs-6 fw-bolder">Lupa Password ?</a>
                    </div>
                    <input class="form-control form-control-lg form-control-solid" type="password" name="password"
                        autocomplete="off" />
                    @error('password')
                        <div class="fv-plugins-message-container invalid-feedback">
                            <span>{{ $message }}</span>
                        </div>
                    @enderror
                </div>
                <div class="text-center">
                    <button type="submit" class="mb-5 btn btn-lg btn-primary w-100">
                        <span class="indicator-label">Masuk</span>
                        <span class="indicator-progress">Loading...
                            <span class="align-middle spinner-border spinner-border-sm ms-2"></span></span>
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection
