<x-app-layout>

    <div class="form-container Cafelogin">
        <div class="form-image imageForgot">
            <div class="l-image">
                <div class="backButton">
                    <a href="{{ route($user_type . '.login') }}" class="btn">
                        <svg style="width:12px;" width="12" height="12" viewBox="0 0 16 16" fill="none">
                            <path
                                d="M0.292892 7.29289C-0.097632 7.68342 -0.097632 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM16 7L0.999999 7V9L16 9V7Z"
                                fill="#461C10" />
                        </svg> {{ __('auth.BackToLogin') }}
                    </a>
                </div>
            </div>
        </div>
        <div class="form-form">
            <div class="form-form-wrap">
                <div class="form-container">
                    <div class="form-content">
                        <h1 class="loginTitle">{{ __('auth.' . $user_type) }} {{ __('auth.forgotPassword') }}</h1>
                        {{-- <x-flash-message></x-flash-message> --}}
                        <form class="text-left" id="forgot_password_form" method="POST" action="{{ $url }}">
                            @csrf
                            <div class="form">
                                <p class="mb-3 mt-3">{{ __('auth.forgotPasswordText') }}</p>
                                <div id="username-field" class="field-wrapper input">
                                    <label class="form-label">{{ __('auth.email') }}</label>
                                    <div class="position-relative">
                                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                            stroke="currentColor" stroke-width="2">
                                            <path
                                                d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z"
                                                stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M22 6L12 13L2 6" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                        <input id="email" name="email" type="text"
                                            class="form-control @error('email') is-invalid @enderror"
                                            value="{{ old('email') }}" placeholder="{{ __('auth.email') }}">
                                        @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                    </div>
                                </div>
                                <p>&nbsp;</p>
                                <!-- <div class="d-sm-flex justify-content-between">
                                    <div class="field-wrapper">
                                        <button type="submit" class="btn btn-primary"
                                            value="">{{ __('auth.passwordResetLinkButton') }}</button>
                                    </div>
                                </div> -->
                            </div>
                            <div class="field-wrapper loginBtnFullSize">
                                <button type="submit" class="btn-login text-uppercase w-100"
                                    value="">{{ __('auth.passwordResetLinkButton') }}</button>
                            </div>
                        </form>
                        <!-- <p class="terms-conditions">{{ __('auth.rightsReserved') }}</p> -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <x-slot name="script">
        <script src="{{ asset('assets/js/libs/jquery.validate.min.js') }}"></script>
        <script src="{{ asset('assets/js/libs/additional-methods.min.js') }}"></script>
        <script>
            const validation = {};
            validation.email_required = "{{ __('validation.validation.email.required') }}";
            validation.email_email = "{{ __('validation.validation.email.email') }}";
            validation.email_customEmail = "{{ __('validation.validation.email.customEmail') }}";
        </script>
        <script src="{{ asset('assets/js/auth/forgot-password.js') }}"></script>
    </x-slot>

</x-app-layout>