source: Klonkt/src/views/pages/admin-comments.ejs@ c16e0a5

<div class="container admin-comments-page">
  <p><a href="/admin" class="btn">&larr; <%= t('acom.back') %></a></p>
  <h1><%= t('acom.title') %></h1>

  <p class="muted">
    <%= t('acom.mode_for_site') %> <strong><%= moderationMode %></strong>
    <% if (moderationMode === 'trust') { %>
      &mdash; <%= t('acom.mode_trust_a') %> <em><%= t('acom.mode_moderate_word') %></em>
      <a href="/admin/sites/<%= site.slug %>/edit"><%= t('acom.site_settings') %></a> <%= t('acom.mode_trust_b') %>
    <% } else { %>
      &mdash; <%= t('acom.mode_moderate_hint') %>
    <% } %>
  </p>

  <% if (success) { %><div class="audio-flash audio-flash--ok"><%= success %></div><% } %>
  <% if (error)   { %><div class="audio-flash audio-flash--err"><%= error %></div><% } %>

  <h2><%= t('acom.pending', { n: pending.length }) %></h2>
  <% if (!pending.length) { %>
    <p class="muted"><%= t('acom.nothing_waiting') %></p>
  <% } else { %>
    <%
      var _c_reply    = t('acom.reply');
      var _c_on       = t('acom.on');
      var _c_approve  = t('acom.approve');
      var _c_reject   = t('acom.reject');
    %>
    <ol class="moderation-list">
      <% pending.forEach(function(c) { %>
        <li class="moderation-item">
          <div class="moderation-meta">
            <strong><%= c.author_username %></strong>
            <% if (c.parent_comment_id) { %><span class="muted">(<%= _c_reply %>)</span><% } %>
            <%= _c_on %> <a href="<%= siteUrlBase %>/<%= c.post_slug %>"><%= c.post_title || c.post_slug %></a>
            <span class="muted">&middot; <%= formatDateTime(c.created_at) %></span>
          </div>
          <blockquote class="moderation-content"><%= c.content %></blockquote>
          <div class="moderation-actions">
            <form method="post" action="<%= siteUrlBase %>/admin/comments/<%= c.id %>/approve" style="display:inline">
              <button type="submit" class="btn btn-primary"><%= _c_approve %></button>
            </form>
            <form method="post" action="<%= siteUrlBase %>/admin/comments/<%= c.id %>/reject" style="display:inline">
              <button type="submit" class="btn btn-danger"><%= _c_reject %></button>
            </form>
          </div>
        </li>
      <% }); %>
    </ol>
  <% } %>

  <h2><%= t('acom.recent') %></h2>
  <% if (!recent.length) { %>
    <p class="muted"><%= t('acom.nothing_yet') %></p>
  <% } else { %>
    <ul class="decision-list">
      <% recent.forEach(function(c) { %>
        <li class="decision-card decision-card--<%= c.status %>">
          <span class="status-pill status-pill--<%= c.status %>"><%= c.status %></span>
          <div class="decision-main">
            <span class="decision-author"><%= c.author_username %></span>
            <a class="decision-post" href="<%= siteUrlBase %>/<%= c.post_slug %>"><%= c.post_title || c.post_slug %></a>
          </div>
          <span class="decision-date"><%= formatDateTime(c.created_at) %></span>
        </li>
      <% }); %>
    </ul>
  <% } %>
</div>

<style>
.admin-comments-page { max-width: 900px; margin: 3rem auto; padding: 0 1rem; }
.admin-comments-page h1 { font-family: var(--font-display, serif); font-size: 2rem; margin: 0 0 1rem; }
.admin-comments-page h2 { font-family: var(--font-display, serif); font-size: 1.25rem; margin: 1.5rem 0 0.75rem; }
.muted { color: var(--ink-muted, var(--ink-soft)); }
.muted a { color: var(--accent); }

.moderation-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.moderation-item {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1rem;
}
.moderation-meta { font-size: 0.85rem; margin-bottom: 0.5rem; color: var(--ink-soft); }
.moderation-meta a { color: var(--accent); }
.moderation-content {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--accent);
  background: var(--paper);
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--ink);
}
.moderation-actions { display: flex; gap: 0.5rem; }

.status-pill {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 10px;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em;
}
.status-pill--approved { background: rgba(40, 160, 90, 0.15); color: #2a9d5e; }
.status-pill--rejected { background: rgba(200, 60, 60, 0.15); color: #c33; }
.status-pill--pending  { background: var(--paper); color: var(--ink-muted, var(--ink-soft)); }

/* Recent decisions als cards (i.p.v. een platte tabel) */
.decision-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.decision-card {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-left: 3px solid var(--rule); border-radius: 10px;
}
.decision-card--approved { border-left-color: #2a9d5e; }
.decision-card--rejected { border-left-color: #c33; }
.decision-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.decision-author { font-weight: 600; }
.decision-post { color: var(--accent); text-decoration: none; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.decision-post:hover { text-decoration: underline; }
.decision-date { flex: 0 0 auto; color: var(--ink-muted, var(--ink-soft)); font-size: 0.8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .decision-card { flex-wrap: wrap; }
  .decision-date { width: 100%; }
}

.audio-flash { padding: 0.75rem 1rem; border-radius: 6px; margin: 1rem 0; font-size: 0.9rem; }
.audio-flash--ok { background: rgba(40, 160, 90, 0.15); color: #2a9d5e; border: 1px solid rgba(40, 160, 90, 0.3); }
.audio-flash--err { background: rgba(200, 60, 60, 0.15); color: #c33; border: 1px solid rgba(200, 60, 60, 0.3); }
</style>