<%- include('../partials/header', { title }) %>

<div class="admin-page-head">
  <div>
    <h2>Contact Messages</h2>
    <p style="color: var(--ink-300);"><%= messages.length %> messages</p>
  </div>
</div>

<div class="table-wrap">
  <table class="data-table">
    <thead><tr><th>From</th><th>Subject / Message</th><th>Status</th><th>Received</th><th></th></tr></thead>
    <tbody>
      <% if (!messages.length) { %>
        <tr><td class="empty-row" colspan="5">No messages yet.</td></tr>
      <% } %>
      <% messages.forEach(function(m) { %>
        <tr>
          <td class="cell-title"><%= m.name %><br /><span style="font-size:0.75rem; color: var(--ink-300);"><%= m.email %></span></td>
          <td style="max-width: 360px;">
            <% if (m.subject) { %><strong style="display:block; font-size:0.8125rem;"><%= m.subject %></strong><% } %>
            <span class="cell-muted"><%= m.message.length > 140 ? m.message.slice(0, 140) + '…' : m.message %></span>
          </td>
          <td>
            <form action="/admin/messages/<%= m.id %>/status" method="POST" data-status-form>
              <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
              <select name="status" class="status-select">
                <% ['new','read','replied','archived'].forEach(function(s) { %>
                  <option value="<%= s %>" <%= m.status === s ? 'selected' : '' %>><%= s %></option>
                <% }); %>
              </select>
            </form>
          </td>
          <td class="cell-muted"><%= new Date(m.created_at).toLocaleString('en-US') %></td>
          <td class="actions">
            <a class="icon-btn" href="mailto:<%= m.email %>" title="Reply by email"><i data-lucide="reply" width="15" height="15"></i></a>
            <form action="/admin/messages/<%= m.id %>/delete" method="POST" style="display:inline;" data-confirm="Delete this message?">
              <input type="hidden" name="_csrf" value="<%= csrfToken %>" />
              <button class="icon-btn is-danger" type="submit" title="Delete"><i data-lucide="trash-2" width="15" height="15"></i></button>
            </form>
          </td>
        </tr>
      <% }); %>
    </tbody>
  </table>
</div>

<%- include('../partials/footer') %>
