@extends('auth.user-auth')
@section('auth-content')
<div class="d-flex flex-wrap h-100 login-container">
    <div class="flex-fill h-100">
        <h1 style="font-family:'Poppins'; font-weight: 100 !important">Reset Password</h1>
        <ul>
            <li class="my-2"><small>Never share your email and password to anyone.</small></li>
            <li class="my-2"><small>Protect yourself from malicious user by changing password regularly.</small></li>
            <li class="my-2"><small>Beware of social engineering.</small></li>
        </ul>
        <img src="{{asset('/assets/images/authentication.svg')}}" alt="image1" class="img-fluid">
    </div>
    <div class="flex-fill h-100">
        <h3 class="text-center" style="padding: 30px 0px;font-family: 'Poppins';font-weight: 100 !important;">Reset now your password</h3>
        <form method="POST" action="{{ route('user.password.update') }}">

            @csrf

            <input type="hidden" name="token" value="{{ $token }}">

            <div class="input-group gap-2 my-4">
                <div class="icon-container border-0 input-group-text">
                    <i class="fa-solid fa-envelope"></i>
                </div>
                <input id="email" type="email" class="form-control border-top-0 border-end-0 border-start-0 bg-white n-bg @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" autofocus placeholder="Email">
            </div>

            <div class="input-group gap-2 my-4">
                <div class="icon-container border-0 input-group-text">
                    <i class="fa-solid fa-lock"></i>
                </div>
                <input id="password" type="password" class="form-control border-top-0 border-end-0 border-start-0 bg-white n-bg @error('password') is-invalid @enderror" name="password" autocomplete="current-password" placeholder="Password">
            </div>

            <div class="input-group gap-2 my-4">
                <div class="icon-container border-0 input-group-text">
                    <i class="fa-solid fa-user-cog"></i>
                </div>
                <input id="password-confirm" type="password" class="form-control border-top-0 border-end-0 border-start-0 bg-white n-bg" name="password_confirmation" autocomplete="new-password" placeholder="Confirm Password">
            </div>

            <div class="form-group d-flex justify-content-center align-items-center flex-column my-2">
                <button type="submit" class="btn btn-outline-success d-block" style="padding: 10px; border-radius: 3rem !important;width: 50%;">
                    {{ __('Confirm Account') }}
                </button>
            </div>
        </form>
    </div>
</div>
@endsection