@using DysonNetwork.Pass.Mailer
@using DysonNetwork.Shared.Localization
@using RazorLight
@inherits TemplatePage<ContactVerificationEmailModel>

@{
    Layout = "_Layout";
    
    var localizer = LocalizationServiceLocator.Service;
    var name = localizer?.Get("usernameFormat", args: new { name = Model.Name }) ?? $"Dear {Model.Name}";
    var contactVerificationBody = localizer?.Get("contactVerificationBody") ?? "Thank you for updating your contact method on the Solar Network. To ensure your account security, we need to verify this change. Please click the button below to verify your contact method:";
    var contactVerificationButton = localizer?.Get("contactVerificationButton") ?? "Verify";
    var contactVerificationHint = localizer?.Get("contactVerificationHint") ?? "If you didn't request this change, please contact our support team immediately.";
}

<div style="display: none">
    Verify Contact Method
</div>
<div role="article" aria-roledescription="email" aria-label lang="en">
    <div class="sm-px-4" style="background-color: #f8fafc; font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif">
        <table align="center" style="margin: 0 auto" cellpadding="0" cellspacing="0" role="none">
            <tr>
                <td style="width: 552px; max-width: 100%">
                    <div role="separator" style="line-height: 24px">&zwj;</div>
                    <table style="width: 100%" cellpadding="0" cellspacing="0" role="none">
                        <tr>
                            <td class="sm-p-6" style="border-radius: 8px; background-color: #fffffe; padding: 24px 36px; border: 1px solid #e2e8f0">
                                <a href="https://solian.app">
                                    <img src="https://solian.app/favicon.png" width="70" alt="Solar Network Logo" style="max-width: 100%; vertical-align: middle">
                                </a>
                                <div role="separator" style="line-height: 24px">&zwj;</div>
                                <h1 style="margin: 0 0 24px; font-size: 24px; line-height: 32px; font-weight: 600; color: #0f172a">
                                    @name
                                </h1>
                                <p style="margin: 0 0 24px; font-size: 16px; line-height: 24px; color: #475569">
                                    @contactVerificationBody
                                </p>
                                <div>
                                    <a href="@Model.Link"
                                       style="display: inline-block; text-decoration: none; padding: 16px 24px; font-size: 16px; line-height: 1; border-radius: 4px; color: #fffffe; background-color: #020617"
                                       class="hover-bg-slate-800">
                                        <span style="mso-text-raise: 16px">@contactVerificationButton</span>
                                    </a>
                                </div>
                                <div role="separator" style="line-height: 24px">&zwj;</div>
                                <p style="margin: 0; font-size: 16px; line-height: 24px; color: #475569">
                                    Thanks,
                                    <br>
                                    <span style="font-weight: 600">Solar Network Team</span>
                                </p>
                                <div role="separator" style="height: 1px; line-height: 1px; background-color: #cbd5e1; margin-top: 24px; margin-bottom: 24px">
                                    &zwj;
                                </div>
                                <p class="mso-break-all" style="margin: 0; font-size: 12px; line-height: 20px; color: #475569">
                                    @contactVerificationHint
                                </p>
                            </td>
                        </tr>
                    </table>
                    <table style="width: 100%" cellpadding="0" cellspacing="0" role="none">
                        <tr>
                            <td class="sm-px-6" style="padding: 24px 36px">
                                <p style="margin: 0; font-size: 12px; color: #64748b">
                                    &copy; 2025 Solsynth LLC. All rights reserved.
                                </p>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</div>