@extends('layouts.user.app')

@section('page_content')
    <div class="min-h-screen bg-bg-pr py-12">
        <x-public.container>
            <div class="block">
                <div class="max-w-md mx-auto bg-bg-pr">
                    <div class="border border-fill-pr p-4 lg:p-8 rounded-xl">
                        <div class="block mb-8">
                            <h1 class="text-title-2 lg:text-lg-title tracking-tight leading-tight font-semibold font-display">
                                {{ __('labels.create-new-password') }}
                            </h1>
                            <p class="text-par-n text-lab-sc">
                                {{ __('labels.create-new-password-helper') }}
                            </p>
                        </div>
                        <div class="block">
                            @if(session()->has('successMessage'))
                                <div class="mb-4">
                                    <x-messages.success-message messageText="{{ session()->get('successMessage')  }}"></x-messages.success-message>
                                </div>
                            @endif

                            <form action="{{ route('user.auth.save-password') }}" method="POST">
                                @csrf
                                @method('PUT')

                                <div class="mb-4">
                                    <x-forms.input type="password" labelText="{{ __('labels.password') }}" name="password" placeholder="{{ __('labels.password') }}"></x-forms.input>
                                </div>
                                <div class="mb-4">
                                    <x-forms.input type="password" labelText="{{ __('labels.new-password-repeat') }}" name="password_confirmation" placeholder="{{ __('labels.password') }}"></x-forms.input>
                                </div>
                                <div class="mb-4">
                                    <x-forms.button width="w-full" text="{{ __('labels.continue') }}" classes="bg-brand-900 text-white w-full"></x-forms.button>
                                </div>
                            </form>
                        </div>
                        <div class="text-center">
                            <a href="{{ route('user.auth.index') }}" class="text-par-s"><span class="underline text-brand-900">{{ __('labels.return-to-login') }}</span></a>
                        </div>
                    </div>
                </div>
            </div>
        </x-public.container>
    </div>
@endsection