<div class="page-header d-print-none">
  <div class="row align-items-center">
    <div class="col">
      <h2 class="page-title"><%= title %></h2>
      <div class="text-secondary mt-1">Public submissions via <code>POST /api/v1/feedback</code></div>
    </div>
    <div class="col-auto ms-auto">
      <form action="/admin/feedback/mark-read" method="post" class="d-inline">
        <input type="hidden" name="redirect" value="/admin/feedback">
        <button type="submit" class="btn btn-outline-primary btn-sm">Mark all read</button>
      </form>
    </div>
  </div>
</div>

<div class="row g-3">
  <div class="col-lg-4">
    <div class="card">
      <div class="card-header"><strong>Inbox</strong></div>
      <%- include('../../partials/adminPaginationTop') %>
      <div class="list-group list-group-flush feedback-inbox-list">
        <% if (!messages.length) { %>
        <div class="list-group-item text-secondary text-center py-4">No messages yet.</div>
        <% } %>
        <% messages.forEach(function(m) { %>
        <a href="/admin/feedback/<%= m.id %>" class="list-group-item list-group-item-action <%= m.status === 'new' ? 'fw-semibold' : '' %> <%= m.isPinned ? 'border-start border-3 border-primary' : '' %>">
          <div class="d-flex justify-content-between gap-2">
            <span class="text-truncate"><% if (m.isFlagged) { %><i class="ti ti-flag text-danger me-1"></i><% } %><% if (m.isPinned) { %><i class="ti ti-pin text-primary me-1"></i><% } %><%= m.subject %></span>
            <span class="badge bg-<%= m.status === 'new' ? 'primary' : 'secondary' %>-lt badge-listing"><%= m.status %></span>
          </div>
          <div class="small text-secondary text-truncate"><%= m.senderName %><% if (m.senderEmail) { %> · <%= m.senderEmail %><% } %></div>
          <div class="small mt-1"><%- include('../../partials/adminDateTime', { value: m.createdAt }) %></div>
        </a>
        <% }); %>
      </div>
      <%- include('../../partials/adminPaginationBottom') %>
    </div>
  </div>
  <div class="col-lg-8">
    <div class="card">
      <div class="card-body text-secondary text-center py-5">
        <i class="ti ti-mail-opened icon mb-2" style="font-size:2.5rem;"></i>
        <p class="mb-0">Select a message from the inbox to view details.</p>
      </div>
    </div>
  </div>
</div>
