@extends('layouts.app')

@section('title', __('password_recovery.reset_page_title'))
@section('meta_description', __('password_recovery.reset_meta_description'))

@section('content')
    <section class="tb-forgot-password py-5">
        <div class="container">
            <div class="tb-forgot-password__wrap">
                <div class="tb-forgot-password__card card shadow-sm border-0">
                    <div class="card-body p-4 p-md-5">
                        <h1 class="tb-page-title h4 mb-2">{{ __('password_recovery.reset_heading') }}</h1>
                        <p class="text-muted mb-2">
                            {{ __('password_recovery.reset_intro') }}
                        </p>
                        <p class="small text-muted mb-4">{{ __('password_recovery.password_rules_hint') }}</p>

                        <form method="POST" action="{{ route('password.reset.submit', [], false) }}" class="tb-forgot-password__form">
                            @csrf

                            <div class="mb-3">
                                <label for="code" class="form-label">{{ __('password_recovery.label_code') }}</label>
                                <input
                                    type="text"
                                    class="form-control @error('code') is-invalid @enderror"
                                    id="code"
                                    name="code"
                                    value="{{ old('code') }}"
                                    placeholder="{{ __('password_recovery.placeholder_code') }}"
                                    inputmode="numeric"
                                    autocomplete="one-time-code"
                                    maxlength="6"
                                    required
                                    aria-required="true"
                                >
                                @error('code')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="new_password" class="form-label">{{ __('password_recovery.label_new_password') }}</label>
                                <input
                                    type="password"
                                    class="form-control @error('new_password') is-invalid @enderror"
                                    id="new_password"
                                    name="new_password"
                                    placeholder="{{ __('password_recovery.placeholder_new_password') }}"
                                    autocomplete="new-password"
                                    required
                                    aria-required="true"
                                >
                                @error('new_password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-4">
                                <label for="new_password_confirmation" class="form-label">{{ __('password_recovery.label_new_password_confirmation') }}</label>
                                <input
                                    type="password"
                                    class="form-control"
                                    id="new_password_confirmation"
                                    name="new_password_confirmation"
                                    autocomplete="new-password"
                                    required
                                    aria-required="true"
                                >
                            </div>

                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('password_recovery.submit_reset') }}
                                </button>
                                <a href="{{ route('esqueci-senha') }}" class="btn btn-outline-secondary">
                                    {{ __('password_recovery.link_request_again') }}
                                </a>
                                <a href="{{ route('entrar') }}" class="btn btn-outline-secondary">
                                    {{ __('password_recovery.back_login') }}
                                </a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection