@extends('layouts.auth')

@section('content')
@php /** @var string $token */
@endphp
<h1 class="qm-auth-title">{{ t_raw('auth.reset_title') }}</h1>
<p class="qm-auth-sub">{{ t_raw('auth.reset_sub') }}</p>

<form method="post" action="{!! url('/reset/' . e($token)) !!}" class="qm-auth-form" data-validate novalidate>
    @csrf
    <div class="mb-3">
        <label for="password" class="form-label">{{ t_raw('account.new_password_label') }}</label>
        <div class="qm-pw-wrap">
            <input type="password" id="password" name="password" class="form-control" minlength="12" pattern="(?!.*\s)(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{12,}" data-label="{{ t_raw('account.new_password_label') }}" autocomplete="new-password" required autofocus aria-describedby="password-hint" placeholder="{{ t_raw('auth.password_placeholder') }}">
            <button type="button" class="qm-pw-toggle" data-toggle-password="password" aria-pressed="false" aria-label="{{ t_raw('common.show_password') }}"><i class="fas fa-eye" aria-hidden="true"></i></button>
        </div>
        @partial('password-rules', ['for' => 'password', 'id' => 'password-hint'])
    </div>
    <div class="mb-3">
        <label for="password_confirm" class="form-label">{{ t_raw('account.confirm_new_password_label') }}</label>
        <div class="qm-pw-wrap">
            <input type="password" id="password_confirm" name="password_confirm" class="form-control" minlength="12" data-label="{{ t_raw('account.confirm_new_password_label') }}" autocomplete="new-password" data-confirm-for="password" required placeholder="{{ t_raw('auth.password_placeholder') }}">
            <button type="button" class="qm-pw-toggle" data-toggle-password="password_confirm" aria-pressed="false" aria-label="{{ t_raw('common.show_password') }}"><i class="fas fa-eye" aria-hidden="true"></i></button>
        </div>
    </div>
    <button type="submit" class="qm-btn w-100">{{ t_raw('auth.update_password_btn') }}</button>
</form>

<p class="qm-auth-foot"><a href="{{ route('login') }}">{{ t_raw('auth.back_to_sign_in') }}</a></p>
@endsection