@extends('layouts.auth')

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

@section('content')
    <div data-rise>
        <div class="mb-8 flex flex-col items-center text-center lg:items-start lg:text-start">
            <span class="flex size-14 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-600 to-violet-600 text-white shadow-xl shadow-brand-600/25">
                <x-dash.icon name="lock-closed" class="size-7" />
            </span>

            <h2 class="mt-6 text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
                {{ __('auth.reset_password_title') }}
            </h2>
            <p class="mt-2 text-[15px] text-slate-500 dark:text-slate-400">
                {{ __('auth.reset_password_subtitle') }}
            </p>
        </div>

        <form method="POST" action="{{ route('password.update') }}" x-data="authForm" @submit="submit" class="space-y-5">
            @csrf

            {{-- The token identifies the request; the email is what it is
                 checked against. Both come from the signed link. --}}
            <input type="hidden" name="token" value="{{ $request->route('token') }}">

            <x-auth.field name="email" type="email" :label="__('auth.email')"
                          icon="envelope" autocomplete="username"
                          :value="old('email', $request->email)" readonly />

            <div x-data="authPassword"
                 data-show-label="{{ __('auth.show_password') }}"
                 data-hide-label="{{ __('auth.hide_password') }}">
                <x-auth.field name="password" type="password" :label="__('auth.new_password')"
                              icon="lock-closed" autocomplete="new-password"
                              class="pe-12" :autofocus="true" x-bind:type="fieldType">
                    <button type="button" @click="toggle" :aria-label="label"
                            class="absolute inset-y-0 end-0 z-10 flex items-center rounded-e-xl pe-4 ps-2 text-slate-400 transition-colors hover:text-slate-700 focus:outline-none focus-visible:text-brand-600 dark:hover:text-slate-200">
                        <x-dash.icon name="eye" class="size-5" x-show="concealed" />
                        <x-dash.icon name="eye-slash" class="size-5" x-cloak x-show="visible" />
                    </button>
                </x-auth.field>
            </div>

            <x-auth.field name="password_confirmation" type="password" :label="__('auth.confirm_password')"
                          icon="lock-closed" autocomplete="new-password" />

            {{-- The clinic sets its own rules, so they are stated rather than
                 discovered by failing validation twice. --}}
            <p class="text-xs text-slate-500 dark:text-slate-400">
                {{ trans_choice('auth.password_requirements', $minLength, ['count' => $minLength]) }}
            </p>

            <button type="submit" @click="ripple" :disabled="submitting"
                    class="group relative flex h-14 w-full items-center justify-center gap-2 overflow-hidden rounded-xl bg-gradient-to-r from-blue-600 to-violet-600 text-[15px] font-semibold text-white shadow-lg shadow-violet-600/25 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-violet-600/30 focus:outline-none focus-visible:ring-4 focus-visible:ring-brand-500/30 active:translate-y-0 disabled:cursor-not-allowed disabled:opacity-70 disabled:hover:translate-y-0">
                <span x-show="submitting" x-cloak class="size-5 animate-spin rounded-full border-2 border-white/30 border-t-white" aria-hidden="true"></span>
                <span>{{ __('auth.reset_password_action') }}</span>
                <x-dash.icon name="arrow-right" class="size-5 transition-transform duration-200 group-hover:translate-x-0.5 rtl:-scale-x-100" x-show="notSubmitting" />
            </button>
        </form>

        <p class="mt-8 text-center text-sm text-slate-500 dark:text-slate-400">
            <a href="{{ route('login') }}"
               class="rounded font-medium text-brand-600 transition-colors hover:text-brand-700 focus:outline-none focus-visible:ring-4 focus-visible:ring-brand-500/20 dark:text-brand-400 dark:hover:text-brand-300">
                {{ __('auth.back_to_sign_in') }}
            </a>
        </p>
    </div>
@endsection