@component('emails.layouts.html', ['subject' => $subject, 'locale' => $locale ?? config('app.fallback_locale')])

{{-- Greeting --}}
<p style="font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 16px; color: {{ theme_color('text.primary') }}; margin: 0 0 20px 0; line-height: 1.6;">
    {{ trans('Hello :name,', ['name' => $notifiable->full_name ?? $notifiable->name], $locale ?? config('app.fallback_locale')) }}
</p>

{{-- Main message --}}
<p style="font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 16px; color: {{ theme_color('text.primary') }}; margin: 0 0 20px 0; line-height: 1.6;">
    {{ trans('You are receiving this email because we received a password reset request for your account.', [], $locale ?? config('app.fallback_locale')) }}
</p>

<p style="font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 16px; color: {{ theme_color('text.primary') }}; margin: 0 0 30px 0; line-height: 1.6;">
    {{ trans('Click the button below to reset your password. This link will expire in :count minutes.', ['count' => $expireMinutes], $locale ?? config('app.fallback_locale')) }}
</p>

{{-- Button --}}
<table role="presentation" class="mobile-button" cellpadding="0" cellspacing="0" border="0" align="center" style="margin: 30px auto;">
    <tr>
        <td align="center" style="border-radius: 6px; background-color: {{ theme_color('brand') }};">
            <!--[if mso]>
            <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{ $resetUrl }}" style="height:44px;v-text-anchor:middle;width:220px;" arcsize="14%" stroke="f" fillcolor="{{ theme_color('brand') }}">
            <w:anchorlock/>
            <center>
            <![endif]-->
            <a href="{{ $resetUrl }}" style="background-color: {{ theme_color('brand') }}; border-radius: 6px; color: #ffffff; display: block; font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; line-height: 44px; text-align: center; text-decoration: none; width: 220px; -webkit-text-size-adjust: none; mso-hide: all;">
                {{ trans('Reset Password', [], $locale ?? config('app.fallback_locale')) }}
            </a>
            <!--[if mso]>
            </center>
            </v:roundrect>
            <![endif]-->
        </td>
    </tr>
</table>

{{-- Alternative link --}}
<p style="font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 16px; color: {{ theme_color('text.primary') }}; margin: 30px 0 0 0; line-height: 1.6; text-align: left;">
    {{ trans("If the button doesn't work, copy and paste this link into your browser:", [], $locale ?? config('app.fallback_locale')) }}
</p>
<p style="font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 12px; color: {{ theme_color('text.primary') }}; margin: 10px 0 30px 0; line-height: 1.6; text-align: left; word-break: break-all;">
    <a href="{{ $resetUrl }}" style="color: {{ theme_color('primary.600') }}; text-decoration: underline;">{{ $resetUrl }}</a>
</p>

{{-- Security notice --}}
<p style="font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 16px; color: {{ theme_color('text.primary') }}; margin: 30px 0 0 0; line-height: 1.6;">
    {{ trans('If you did not request this password reset, no further action is required.', [], $locale ?? config('app.fallback_locale')) }}
</p>

{{-- Closing --}}
<p style="font-family: {{ theme_font('font_family_body') }}, Arial, Helvetica, sans-serif; font-size: 16px; color: {{ theme_color('text.primary') }}; margin: 30px 0 0 0; line-height: 1.6;">
    {{ timebank_config('mail.platform_sign_off_signature.' . ($locale ?? config('app.fallback_locale'))) ?? timebank_config('mail.platform_sign_off_signature.en', 'See you around!') }}
</p>

@endcomponent
