@extends('layouts.app')

@section('title', 'Forgot Password')

@section('content')
    <main id="main">
        <section class="breadcrumbs">
            <div class="container">
                <div class="d-flex justify-content-between align-items-center">
                    <h2>Forgot Password</h2>
                    <ol>
                        <li><a href="{{ route('home.index') }}">Home</a></li>
                        <li>Forgot Password</li>
                    </ol>
                </div>
            </div>
        </section>

        <section class="contact">
            <div class="container">
                <div class="row gy-4">
                    <div class="col-lg-6 offset-3">
                        <form action="{{ route('password.email') }}" method="post" role="form" class="php-email-form">
                            @csrf
                            <div class="row gy-3">
                                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-question-octagon" viewBox="0 0 16 16">
                                    <path d="M4.54.146A.5.5 0 0 1 4.893 0h6.214a.5.5 0 0 1 .353.146l4.394 4.394a.5.5 0 0 1 .146.353v6.214a.5.5 0 0 1-.146.353l-4.394 4.394a.5.5 0 0 1-.353.146H4.893a.5.5 0 0 1-.353-.146L.146 11.46A.5.5 0 0 1 0 11.107V4.893a.5.5 0 0 1 .146-.353zM5.1 1 1 5.1v5.8L5.1 15h5.8l4.1-4.1V5.1L10.9 1z"/>
                                    <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94"/>
                                </svg>
                                <p class="text-center">Enter your email address below to receive a password reset email.</p>
                                @include('partials.validation-errors', ['displayErrors' => false])
                                @if(session('status'))
                                    <div class="alert alert-success text-center">{{ session('status') }}</div>
                                @endif
                                <div class="col-lg-12">
                                    <label for="email" class="d-none"></label>
                                    <input type="email"
                                        class="form-control @error('email') is-invalid @enderror"
                                        name="email"
                                        id="email"
                                        placeholder="Your Email"
                                        value="{{ old('email') }}"
                                        required />
                                    @error('email') <span class="invalid-feedback" role="alert">{{ $message }}</span> @enderror
                                </div>
                            </div>
                            <div class="text-center mt-3"><button type="submit">Submit</button></div>
                            <p class="mt-3 text-center">
                                Already have an account? <a href="{{ route('login') }}">Login Here</a>
                            </p>
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </main>
@endsection