@extends('layouts.app')

@section('title', __('auth.reset_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.reset_password') }}</h1>
                <p class="text-gray-400 mt-2">{{ __('auth.create_new_password') }}</p>
            </div>

            @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.update', app()->getLocale()) }}">
                @csrf

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

                <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="{{ $email ?? 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">
                    <label for="password" class="block text-gray-400 mb-2">{{ __('auth.password') }}</label>
                    <input id="password" type="password" name="password" required
                        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">
                    <label for="password_confirmation" class="block text-gray-400 mb-2">{{ __('auth.confirm_password') }}</label>
                    <input id="password_confirmation" type="password" name="password_confirmation" required
                        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.reset_password') }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection