<%- include('_head') %>
  <h1 style="font-size:24px; margin-bottom:18px;">Contact messages</h1>

  <div class="panel">
    <% if (messages.length) { messages.forEach(function(m){ %>
      <div style="padding:16px 0; border-bottom:1px solid var(--line); <%= m.is_read ? '' : 'background:rgba(212,175,55,.04);' %>">
        <div style="display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center;">
          <div>
            <b><%= m.name %></b> <span style="color:var(--muted); font-size:12.5px;">&lt;<%= m.email %>&gt;<%= m.phone ? ' · ' + m.phone : '' %></span>
            <% if (m.subject) { %>· <span style="color:var(--gold-2);"><%= m.subject %></span><% } %>
          </div>
          <div style="display:flex; gap:8px; align-items:center;">
            <span style="color:var(--muted); font-size:12px;"><%= new Date(m.created_at + 'Z').toLocaleString() %></span>
            <% if (!m.is_read) { %><form method="post" action="/admin/messages/<%= m.id %>/read"><button class="btn btn-dark btn-sm" type="submit">Mark read</button></form><% } %>
            <form method="post" action="/admin/messages/<%= m.id %>/delete" onsubmit="return confirm('Delete this message?');"><button class="btn btn-dark btn-sm" type="submit"><i class="ic" data-ic="trash"></i></button></form>
            <a class="btn btn-dark btn-sm" href="mailto:<%= m.email %>?subject=Re: <%= encodeURIComponent(m.subject || 'Your TOUS CINO enquiry') %>"><i class="ic" data-ic="mail"></i> Reply</a>
          </div>
        </div>
        <p style="color:var(--ink-2); font-size:14px; margin-top:8px; white-space:pre-line;"><%= m.body %></p>
      </div>
    <% }); } else { %>
      <p style="color:var(--muted); text-align:center; padding:30px;">No messages yet.</p>
    <% } %>
  </div>
<%- include('_foot') %>
