<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>
        {{ __('mail.send_code.subject') }}
    </title>
</head>

<body style="margin:0;padding:0;background:#f5f5f7;font-family:Arial,Helvetica,sans-serif;">

    <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#f5f5f7">
        <tr>
            <td align="center" style="padding:25px;">

                <!-- CONTAINER -->
                <table width="650" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff"
                    style="border-radius:24px;overflow:hidden;">

                    <!-- HEADER -->
                    <tr>
                        <td style="background:#5a22d6;padding:50px 40px;color:white;">

                            <table width="100%">
                                <tr>

                                    <!-- LEFT -->
                                    <td valign="middle">

                                        <div style="font-size:52px;font-weight:bold;line-height:1.1;">
                                            {{ __('mail.send_code.subject') }}
                                        </div>

                                        <div style="font-size:20px;margin-top:20px;line-height:1.6;">
                                            {{ __('mail.send_code.header_subtitle') }}
                                        </div>

                                    </td>

                                    <!-- RIGHT -->
                                    <td width="220" align="right" valign="middle">

                                        <img src="{{ asset('images/diarinho_email_code.svg') }}" alt="Diarinho"
                                            width="170"
                                            style=" display:block; 
                                            border:0; 
                                            width:170px; 
                                            max-width:170px; 
                                            height:auto; 
                                            margin-left:auto; ">

                                    </td>

                                </tr>
                            </table>

                        </td>
                    </tr>

                    <!-- CONTENT -->
                    <tr>
                        <td style="padding:30px;background:#f5f5f7;">

                            <!-- MAIN CARD -->
                            <table width="100%" bgcolor="#ffffff"
                                style="border-radius:24px;padding:35px;margin-bottom:25px;">

                                <!-- GREETING -->
                                <tr>
                                    <td>

                                        @if (!empty($recipientName))
                                            <div style="font-size:34px;font-weight:bold;color:#222;line-height:1.4;">
                                                {{ __('mail.send_code.greeting', ['name' => $recipientName]) }}
                                            </div>
                                        @else
                                            <div style="font-size:34px;font-weight:bold;color:#222;line-height:1.4;">
                                                {{ __('mail.send_code.greeting_anonymous') }}
                                            </div>
                                        @endif

                                    </td>
                                </tr>

                                <!-- BODY -->
                                <tr>
                                    <td style="padding-top:25px;font-size:20px;color:#666;line-height:1.8;">
                                        {{ __('mail.send_code.body_intro') }}
                                    </td>
                                </tr>

                                <!-- CODE -->
                                <tr>
                                    <td align="center" style="padding-top:35px;">

                                        <table cellpadding="0" cellspacing="0" border="0" bgcolor="#f3ecff"
                                            style="border-radius:24px;padding:35px 45px;">

                                            <tr>

                                                <td align="center">

                                                    <div
                                                        style="font-size:68px;font-weight:800;color:#5a22d6;letter-spacing:16px;">
                                                        {{ $code }}
                                                    </div>

                                                </td>

                                            </tr>

                                        </table>

                                    </td>
                                </tr>

                                <!-- EXPIRATION -->
                                <tr>
                                    <td align="center"
                                        style="padding-top:28px;font-size:17px;color:#777;line-height:1.7;">

                                        {{ __('mail.send_code.expiry_notice') }}

                                    </td>
                                </tr>

                                <!-- WARNING -->
                                <tr>
                                    <td style="padding-top:30px;">

                                        <table width="100%" bgcolor="#fff8e8"
                                            style="border-radius:18px;padding:22px;">

                                            <tr>

                                                <td style="font-size:17px;color:#9a6a00;line-height:1.8;">

                                                    {{ __('mail.send_code.ignore_notice') }}

                                                </td>

                                            </tr>

                                        </table>

                                    </td>
                                </tr>

                            </table>

                            <!-- FOOTER CARD -->
                            <table width="100%" bgcolor="#f1ebff"
                                style="border-radius:24px;padding:25px;margin-bottom:25px;">

                                <tr>

                                    <td width="130" valign="middle">

                                        <img src="{{ asset('images/diarinho_email_welcome.svg') }}" alt="Diarinho"
                                            width="120"
                                            style=" display:block;
                                             border:0;
                                              width:120px; 
                                              max-width:120px; 
                                              height:auto; ">

                                    </td>

                                    <td valign="middle">

                                        <div style="font-size:34px;font-weight:bold;color:#5a22d6;">

                                            {{ __('mail.send_code.footer_title') }}

                                        </div>

                                        <div style="font-size:18px;color:#666;line-height:1.7;margin-top:10px;">

                                            {{ __('mail.send_code.footer_note') }}

                                        </div>

                                    </td>

                                </tr>

                            </table>

                        </td>
                    </tr>

                    <!-- FOOTER -->
                    <tr>
                        <td style="background:#5a22d6;padding:35px;color:white;">

                            <table width="100%">

                                <tr>
                                    <!-- CONTACT -->
                                    <td align="right" style="font-size:18px;line-height:1.7;">

                                        {{ __('mail.send_code.footer_note') }}

                                    </td>

                                </tr>

                            </table>

                            <!-- BOTTOM -->
                            <div style="margin-top:25px;text-align:center;font-size:13px;opacity:0.7;">

                                © {{ date('Y') }}

                            </div>

                        </td>
                    </tr>

                </table>

            </td>
        </tr>
    </table>

</body>

</html>
