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

@{
    Layout = "_Layout";
    
    var localizer = LocalizationServiceLocator.Service;
    var name = localizer?.Get("usernameFormat", args: new { name = Model.Name }) ?? $"Dear {Model.Name}";
    var accountDeletionBody = localizer?.Get("accountDeletionBody") ?? "We've received a request to delete your Solar Network account. We're sorry to see you go. To confirm your account deletion, please click the button below. Please note that this action is permanent and cannot be undone.";
    var accountDeletionButton = localizer?.Get("accountDeletionButton") ?? "Confirm Account Deletion";
    var accountDeletionHint = localizer?.Get("accountDeletionHint") ?? "If you did not request to delete your account, please ignore this email or contact our support team immediately.";
}

<div style="display: none">
    Account Deletion Confirmation
</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">
                                    @accountDeletionBody
                                </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: #dc2626"
                                       class="hover-bg-slate-800">
                                        <span style="mso-text-raise: 16px">@accountDeletionButton</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">
                                    @accountDeletionHint
                                </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>