@extends('layouts.guest')
@section('title', __('Reset your password'))

@section('content')
<div>
    <a href="{{ route('login') }}"
       class="inline-flex items-center gap-1.5 text-xs text-slate-500 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white transition mb-6">
        <svg class="w-3.5 h-3.5 rtl:scale-x-[-1]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        {{ __('Back to sign in') }}
    </a>

    <h1 class="text-3xl sm:text-[2rem] font-semibold tracking-tight text-slate-900 dark:text-white leading-tight">
        {{ __('Forgot your password?') }}
    </h1>
    <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
        {{ __('No worries — enter the email tied to your workspace and we\'ll send you a reset link.') }}
    </p>

    @if(session('status'))
        <div class="mt-6 mb-4 px-4 py-3 rounded-xl bg-emerald-50 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-300 text-sm">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="mt-6 mb-4 px-4 py-3 rounded-xl bg-rose-50 text-rose-700 dark:bg-rose-900/30 dark:text-rose-300 text-sm">{{ $errors->first() }}</div>
    @endif

    <form method="POST" action="{{ route('password.email') }}" class="mt-8 space-y-4">
        @csrf
        <div>
            <label class="form-label">{{ __('Email') }}</label>
            <input name="email" type="email" required value="{{ old('email') }}" class="form-input" autofocus placeholder="{{ __('you@firm.com') }}">
        </div>
        <button class="btn-primary w-full inline-flex items-center justify-center gap-1.5">
            {{ __('Send reset link') }}
            <svg class="w-4 h-4 rtl:scale-x-[-1]" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"/></svg>
        </button>
    </form>

    <div class="mt-8 pt-6 border-t border-slate-200/70 dark:border-slate-800 text-center text-sm text-slate-500 dark:text-slate-400">
        {{ __("Don't have an account?") }}
        <a href="{{ route('register') }}" class="font-medium text-slate-900 dark:text-white hover:underline">{{ __('Create your workspace') }}</a>
    </div>
</div>
@endsection