1<div class="px-6 py-4 space-y-2 text-sm">
2 {% if not emails %}
3 <p class="text-white/50">No emails captured yet. Send an email to see it here.</p>
4 <p class="text-white/30 text-xs">Writing to <code>{{ email_file_path }}</code></p>
5 {% else %}
6 <div class="flex items-center justify-between mb-2">
7 <p class="text-white/50 text-xs">
8 Recent emails ({{ emails|length }}) from <code class="text-white/40">{{ email_file_path }}</code>
9 </p>
10 </div>
11 {% for email in emails %}
12 <details class="rounded border border-white/10 bg-white/5">
13 <summary class="cursor-pointer px-3 py-2 hover:bg-white/5 flex items-center gap-2">
14 <span class="text-[10px] uppercase text-white/30 tabular-nums w-10">{{ email.kind }}</span>
15 <span class="flex-1 truncate">
16 <span class="text-white/90">{{ email.subject }}</span>
17 <span class="text-white/50 text-xs">→ {{ email.to }}</span>
18 </span>
19 <span class="text-[11px] text-white/30 tabular-nums">{{ email.date }}</span>
20 </summary>
21 <div class="border-t border-white/10 bg-zinc-900">
22 <dl class="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1 px-3 py-2 text-xs text-white/70">
23 {% if email.from %}<dt class="text-white/40">From</dt><dd>{{ email.from }}</dd>{% endif %}
24 {% if email.to %}<dt class="text-white/40">To</dt><dd>{{ email.to }}</dd>{% endif %}
25 {% if email.cc %}<dt class="text-white/40">Cc</dt><dd>{{ email.cc }}</dd>{% endif %}
26 {% if email.date %}<dt class="text-white/40">Date</dt><dd>{{ email.date }}</dd>{% endif %}
27 </dl>
28 {% if email.html_body %}
29 <iframe
30 sandbox
31 loading="lazy"
32 srcdoc="{{ email.html_body }}"
33 class="w-full h-[400px] border-0 bg-white rounded-b"
34 ></iframe>
35 {% elif email.text_body %}
36 <pre class="px-3 py-3 bg-zinc-950 text-white/80 text-xs whitespace-pre-wrap rounded-b">{{ email.text_body }}</pre>
37 {% endif %}
38 </div>
39 </details>
40 {% endfor %}
41 {% endif %}
42</div>