<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ subject }}</title>
</head>
<body style="margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background-color:#f4f4f5;">
<!-- Preview text (visible in inbox preview) -->
<div style="display:none;font-size:1px;color:#f4f4f5;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">
{{ preview_text | default(subject) }} ‌ ‌ ‌ ‌ ‌
</div>
<table role="presentation" style="width:100%;max-width:600px;margin:0 auto;">
<!-- Header -->
<tr>
<td style="padding:32px 24px 24px;background-color:#111827;text-align:center;">
<h1 style="margin:0;color:#ffffff;font-size:20px;font-weight:600;letter-spacing:-0.025em;">
{{ form_name | default('') }}
</h1>
{% if sender_name %}
<p style="margin:8px 0 0 0;color:#9ca3af;font-size:13px;">
from {{ sender_name }}
</p>
{% endif %}
</td>
</tr>
<!-- Body -->
<tr>
<td style="padding:32px 24px;background-color:#ffffff;">
<!-- Greeting -->
{% if recipient.first_name %}
<p style="margin:0 0 12px 0;color:#374151;font-size:15px;line-height:1.6;">
Hi {{ recipient.first_name }},
</p>
{% else %}
<p style="margin:0 0 12px 0;color:#374151;font-size:15px;line-height:1.6;">
Hello,
</p>
{% endif %}
<!-- Message body -->
{% if body %}
<div style="margin:0 0 24px 0;color:#374151;font-size:15px;line-height:1.6;">
{{ body }}
</div>
{% endif %}
<!-- Field preview (first 3 fields) -->
{% if field_preview %}
<table role="presentation" style="width:100%;margin:0 0 24px 0;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;">
<tr><td style="padding:16px;">
<p style="margin:0 0 8px 0;color:#6b7280;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;">
What you'll see:
</p>
{{ field_preview }}
</td></tr>
</table>
{% endif %}
<!-- CTA button -->
{% if cta_url %}
<table role="presentation" style="margin:0 0 8px 0;">
<tr>
<td style="border-radius:6px;background-color:#3b82f6;">
<a href="{{ cta_url }}" style="display:inline-block;padding:12px 32px;color:#ffffff;font-size:15px;font-weight:600;text-decoration:none;border-radius:6px;">
{{ cta_text | default('Open Form') }}
</a>
</td>
</tr>
</table>
{% endif %}
<!-- Fallback URL -->
{% if cta_url %}
<p style="margin:16px 0 0 0;color:#9ca3af;font-size:12px;line-height:1.5;">
If the button above doesn't work, copy and paste this link:<br>
<a href="{{ cta_url }}" style="color:#6b7280;word-break:break-all;">{{ cta_url }}</a>
</p>
{% endif %}
</td>
</tr>
<!-- Footer -->
<tr>
<td style="padding:24px;background-color:#f9fafb;text-align:center;border-top:1px solid #e5e7eb;">
<p style="margin:0 0 8px 0;color:#9ca3af;font-size:12px;line-height:1.5;">
Sent by {{ sender_name | default('AgentForms') }}
</p>
{% if unsubscribe_url %}
<p style="margin:0;color:#9ca3af;font-size:12px;line-height:1.5;">
<a href="{{ unsubscribe_url }}" style="color:#6b7280;text-decoration:underline;">Unsubscribe</a>
</p>
{% endif %}
{% if physical_address %}
<p style="margin:12px 0 0 0;color:#d1d5db;font-size:11px;line-height:1.4;">
{{ physical_address }}
</p>
{% endif %}
</td>
</tr>
</table>
</body>
</html>