<!DOCTYPE html>
<html lang="{{ $locale }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ trans('mail.reset_password_form.page_title', [], $locale) }}</title>
</head>
<body style="margin: 0; min-height: 100vh; display: grid; place-items: center; background: #f5efe6; color: #232323; font-family: Arial, sans-serif;">
    <main style="width: min(100% - 32px, 520px); background: #ffffff; border-radius: 8px; padding: 32px; box-sizing: border-box;">
        <p style="margin: 0 0 8px; color: #426fb3; font-size: 14px; font-weight: 700; text-transform: uppercase;">
            {{ $appName }}
        </p>

        <h1 style="margin: 0 0 16px; color: #000000; font-size: 28px; line-height: 34px;">
            {{ $passwordReset ? trans('mail.reset_password_form.success_title', [], $locale) : trans('mail.reset_password_form.title', [], $locale) }}
        </h1>

        @if ($passwordReset)
            <p style="margin: 0; color: #232323; font-size: 16px; line-height: 24px;">
                {{ trans('mail.reset_password_form.success', [], $locale) }}
            </p>
        @else
            <p style="margin: 0 0 24px; color: #232323; font-size: 16px; line-height: 24px;">
                {{ trans('mail.reset_password_form.intro', [], $locale) }}
            </p>

            @if ($errors->any())
                <div style="margin: 0 0 16px; padding: 12px 14px; border-radius: 8px; background: #fff2f2; color: #9f2d2d; font-size: 14px; line-height: 20px;">
                    {{ $errors->first() }}
                </div>
            @endif

            <form method="POST" action="{{ route('password.web-update') }}" style="display: grid; gap: 16px;">
                @csrf

                <input type="hidden" name="token" value="{{ $token }}">

                <label style="display: grid; gap: 8px; color: #232323; font-size: 14px; font-weight: 700;">
                    {{ trans('mail.reset_password_form.email', [], $locale) }}
                    <input
                        type="email"
                        name="email"
                        value="{{ old('email', $email) }}"
                        required
                        autocomplete="email"
                        style="width: 100%; box-sizing: border-box; border: 1px solid #f5efe6; border-radius: 8px; padding: 12px 14px; color: #232323; font-size: 16px;"
                    >
                </label>

                <label style="display: grid; gap: 8px; color: #232323; font-size: 14px; font-weight: 700;">
                    {{ trans('mail.reset_password_form.password', [], $locale) }}
                    <input
                        type="password"
                        name="password"
                        required
                        minlength="8"
                        autocomplete="new-password"
                        style="width: 100%; box-sizing: border-box; border: 1px solid #f5efe6; border-radius: 8px; padding: 12px 14px; color: #232323; font-size: 16px;"
                    >
                </label>

                <label style="display: grid; gap: 8px; color: #232323; font-size: 14px; font-weight: 700;">
                    {{ trans('mail.reset_password_form.password_confirmation', [], $locale) }}
                    <input
                        type="password"
                        name="password_confirmation"
                        required
                        minlength="8"
                        autocomplete="new-password"
                        style="width: 100%; box-sizing: border-box; border: 1px solid #f5efe6; border-radius: 8px; padding: 12px 14px; color: #232323; font-size: 16px;"
                    >
                </label>

                <button type="submit" style="min-height: 48px; border: 0; border-radius: 8px; background: #007f3a; color: #ffffff; font-size: 16px; font-weight: 700; cursor: pointer;">
                    {{ trans('mail.reset_password_form.submit', [], $locale) }}
                </button>
            </form>
        @endif
    </main>
</body>
</html>
