<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Permit update — sfpermits.ai</title>
</head>
<body style="margin:0;padding:0;background:#f5f6fa;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;">
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="background:#f5f6fa;padding:32px 16px;">
<tr>
<td align="center">
<table width="600" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;width:100%;background:#ffffff;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.08);">
<!-- Header -->
<tr>
<td style="background:#1e3a5f;padding:24px 32px;text-align:center;">
<a href="{{ base_url }}" style="text-decoration:none;">
<span style="color:#ffffff;font-size:1.3rem;font-weight:700;letter-spacing:-0.5px;">sfpermits.ai</span>
</a>
<p style="color:#93b8d4;margin:4px 0 0;font-size:0.8rem;">San Francisco Building Permit Intelligence</p>
</td>
</tr>
<!-- Eyebrow label -->
<tr>
<td style="padding:24px 32px 0;text-align:center;">
<span style="display:inline-block;background:#e8f0fe;color:#1e3a5f;font-size:0.75rem;font-weight:600;letter-spacing:0.5px;padding:4px 12px;border-radius:20px;text-transform:uppercase;">Permit Update</span>
</td>
</tr>
<!-- Main content -->
<tr>
<td style="padding:20px 32px 32px;">
<!-- Address heading -->
<h1 style="margin:0 0 4px;font-size:1.3rem;color:#111827;line-height:1.3;">
{{ address }}
</h1>
{% if permit_number %}
<p style="margin:0 0 20px;font-size:0.9rem;color:#6b7280;">
Permit {{ permit_number }}
</p>
{% else %}
<div style="margin-bottom:20px;"></div>
{% endif %}
<!-- Change details card -->
<div style="background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;padding:20px;margin-bottom:24px;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding:6px 0;font-size:0.875rem;color:#6b7280;width:120px;vertical-align:top;">Change</td>
<td style="padding:6px 0;font-size:0.875rem;color:#111827;font-weight:500;">{{ status_text }}</td>
</tr>
{% if date_text %}
<tr>
<td style="padding:6px 0;font-size:0.875rem;color:#6b7280;vertical-align:top;">Date</td>
<td style="padding:6px 0;font-size:0.875rem;color:#111827;">{{ date_text }}</td>
</tr>
{% endif %}
{% if change.get('old_status') and change.get('new_status') and change.get('change_type') != 'new_permit' %}
<tr>
<td style="padding:6px 0;font-size:0.875rem;color:#6b7280;vertical-align:top;">Previous</td>
<td style="padding:6px 0;font-size:0.875rem;color:#6b7280;">{{ change.old_status }}</td>
</tr>
{% endif %}
{% if change.get('neighborhood') %}
<tr>
<td style="padding:6px 0;font-size:0.875rem;color:#6b7280;vertical-align:top;">Neighborhood</td>
<td style="padding:6px 0;font-size:0.875rem;color:#111827;">{{ change.neighborhood }}</td>
</tr>
{% endif %}
</table>
</div>
<!-- CTA button -->
<div style="text-align:center;margin-bottom:24px;">
<a href="{{ permit_url }}" style="display:inline-block;background:#2563eb;color:#ffffff;text-decoration:none;padding:12px 28px;border-radius:6px;font-size:0.9rem;font-weight:600;">
View Permit Details
</a>
</div>
<!-- Divider -->
<hr style="border:none;border-top:1px solid #e5e7eb;margin:0 0 20px;">
<!-- Footer links -->
<p style="margin:0;font-size:0.8rem;color:#9ca3af;text-align:center;line-height:1.8;">
You're receiving this because you're watching this address on sfpermits.ai.<br>
<a href="{{ account_url }}" style="color:#6b7280;text-decoration:underline;">Manage notification preferences</a>
·
<a href="{{ account_url }}?unsubscribe_notifications=1&uid={{ user_id }}&token={{ unsubscribe_token }}" style="color:#6b7280;text-decoration:underline;">Turn off permit alerts</a>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
