@extends('layouts.auth')

@section('content')
<div class="text-center mb-4">
    <h3 class="text-center mb-2 text-black">{{ __('auth.reset_password') }}</h3>
    <span>{{ __('auth.enter_email_to_reset') }}</span>
</div>

<div class="card">
    <div class="card-body">
        @if (session('status'))
            <div class="alert alert-success mb-4" role="alert">
                <svg width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.67 2H16.34C19.73 2 22 4.38 22 7.92V16.09C22 19.62 19.73 22 16.34 22H7.67C4.28 22 2 19.62 2 16.09V7.92C2 4.38 4.28 2 7.67 2ZM11.43 14.99L16.18 10.24C16.52 9.9 16.52 9.35 16.18 9C15.84 8.66 15.28 8.66 14.94 9L10.81 13.13L9.06 11.38C8.72 11.04 8.16 11.04 7.82 11.38C7.48 11.72 7.48 12.27 7.82 12.62L10.2 14.99C10.37 15.16 10.59 15.24 10.81 15.24C11.04 15.24 11.26 15.16 11.43 14.99Z" fill="currentColor"></path>
                </svg>
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('password.email') }}">
            @csrf

            <div class="mb-3">
                <label for="email" class="form-label mb-2 fs-13 label-color font-w500">{{ __('auth.enter_email_address') }}</label>
                <input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus placeholder="{{ __('auth.enter_email_address') }}">
                
                @error('email')
                    <div class="invalid-feedback">
                        <strong>{{ $message }}</strong>
                    </div>
                @enderror
            </div>

            <button type="submit" class="btn btn-primary btn-block">
                {{ __('auth.send_reset_link') }}
            </button>
        </form>

        <div class="text-center mt-3">
            <a href="{{ route('login') }}" class="text-primary">
               {{ __('auth.back_to_login') }}
            </a>
        </div>
    </div>
</div>
@endsection