@extends('layouts.app')

@section('title', __('auth.forgot_password'))

@section('content')
<div class="container mx-auto px-4 py-16">
    <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <div class="p-8">
            <div class="text-center mb-8">
                <h1 class="text-3xl font-bold text-white">{{ __('auth.forgot_password') }}</h1>
                <p class="text-gray-400 mt-2">{{ __('auth.reset_instructions') }}</p>
            </div>

            @if(session('status'))
                <div class="bg-green-600 text-white p-4 rounded-lg mb-6">
                    {{ session('status') }}
                </div>
            @endif

            @if($errors->any())
                <div class="bg-red-600 text-white p-4 rounded-lg mb-6">
                    <ul class="list-disc list-inside">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

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

                <div class="mb-6">
                    <label for="email" class="block text-gray-400 mb-2">{{ __('auth.email') }}</label>
                    <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus
                        class="w-full bg-gray-700 border border-gray-600 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-blue-500">
                </div>

                <div class="mb-6">
                    <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg">
                        {{ __('auth.send_reset_link') }}
                    </button>
                </div>
            </form>

            <div class="text-center text-gray-400">
                <a href="{{ route('login', app()->getLocale()) }}" class="text-blue-400 hover:text-blue-300">
                    <i class="fas fa-arrow-left mr-1"></i> {{ __('auth.back_to_login') }}
                </a>
            </div>
        </div>
    </div>
</div>
@endsection