<!DOCTYPE html><html lang="nl"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title><%= msg.subject || 'Geen onderwerp' %> — Mek-Tech</title><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="/css/style.css"><link rel="stylesheet" href="/css/dynamic.css"><link rel="icon" href="/img/favicon.svg"><style>
.email-hdr{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:.75rem}
.email-hdr h2{font-size:1.1rem;color:var(--text);font-weight:600;margin-bottom:.5rem}
.email-hdr .em-meta{display:grid;grid-template-columns:auto 1fr;gap:.2rem .5rem;font-size:.8rem}
.email-hdr .em-meta .em-l{color:var(--text-muted)}.email-hdr .em-meta .em-v{color:var(--text)}
.email-body{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;min-height:200px;overflow-x:auto}
.email-body iframe{width:100%;min-height:400px;border:none;background:#fff;border-radius:4px}
.email-body pre{white-space:pre-wrap;font-family:inherit;font-size:.85rem;color:var(--text);line-height:1.6}
</style><script src="https://unpkg.com/lucide@latest"></script></head><body>
<nav class="navbar"><div class="nav-inner"><a href="/" class="nav-brand"><img src="/img/logo.svg" class="nav-logo" alt="Mek-Tech"></a><div style="display:flex;align-items:center;gap:.4rem"><a href="/" class="nav-icon-btn" title="Dashboard"><i data-lucide="layout-dashboard" style="width:15px;height:15px"></i> Dashboard</a><button class="theme-toggle" id="themeToggle" onclick="toggleTheme()"></button><a href="/auth/logout" class="nav-icon-btn" style="color:var(--red)"><i data-lucide="log-out" style="width:15px;height:15px"></i> Uitloggen</a></div></div></nav>
<div class="container" style="max-width:800px">
<a href="/email" class="back-link">← Terug naar inbox</a>
<div class="email-hdr">
<h2><%= msg.subject || '(geen onderwerp)' %></h2>
<div class="em-meta">
<span class="em-l">Van:</span><span class="em-v"><%= msg.from_name || msg.from_addr || 'Onbekend' %> <%= msg.from_addr ? '<' + msg.from_addr + '>' : '' %></span>
<span class="em-l">Aan:</span><span class="em-v"><%= msg.to_addr || '-' %></span>
<% if (msg.cc) { %><span class="em-l">CC:</span><span class="em-v"><%= msg.cc %></span><% } %>
<span class="em-l">Datum:</span><span class="em-v"><%= msg.date ? new Date(msg.date).toLocaleString('nl-NL',{year:'numeric',month:'long',day:'numeric',hour:'2-digit',minute:'2-digit'}) : '-' %></span>
</div>
<div style="display:flex;gap:.35rem;margin-top:.5rem">
<a href="/email/compose?to=<%= msg.from_addr %>&subject=Re: <%= msg.subject %>" class="btn btn-small">↩ Beantwoorden</a>
<form method="POST" action="/email/message/<%= msg.id %>/delete" style="display:inline"><button class="btn-small danger">✕ Verwijderen</button></form>
</div>
</div>
<div class="email-body">
<% if (msg.body_html && msg.body_html.length > 10) { %>
<iframe sandbox="" srcdoc="<%= msg.body_html.replace(/"/g, '&quot;').replace(/'/g, '&#39;') %>"></iframe>
<% } else { %>
<pre><%= msg.body_text || '(geen inhoud)' %></pre>
<% } %>
</div>
</div><script src="/js/theme.js"></script><script>lucide.createIcons()</script></body></html>
