@extends('layouts.auth')

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

@section('content')
    <div data-rise>
        {{-- Brand mark, matching the sign-in screen: staff arriving here have
             usually just failed to sign in and should not feel they have
             landed somewhere else. --}}
        <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="key" class="size-7" />
            </span>

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

        {{--
            Fortify flashes the same confirmation whether or not the address
            belongs to an account, and so does this page. Saying "no such user"
            would turn the form into a way of asking which staff addresses
            exist at a clinic.
        --}}
        @if (session('status'))
            <div class="mb-5 flex items-start gap-3 rounded-xl border border-emerald-200 bg-emerald-50/80 p-4 text-sm text-emerald-800 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300" role="status">
                <x-dash.icon name="check-circle" class="mt-px size-5 shrink-0" />
                <span>{{ session('status') }}</span>
            </div>
        @endif

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

            <x-auth.field name="email" type="email" :label="__('auth.email')"
                          icon="envelope" autocomplete="username" :autofocus="true" />

            <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.send_reset_link') }}</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>

        {{-- Recovery depends on outgoing email, which a clinic configures
             itself. Without it the link is generated and never arrives, and
             the person is left waiting rather than phoning whoever can help. --}}
        <p class="mt-4 text-center text-xs text-slate-400 dark:text-slate-500">
            {{ __('auth.reset_email_hint') }}
        </p>
    </div>
@endsection