<section>
  <div class="admin-header">
    <h1>Comments</h1>
  </div>
  <% if (!comments.length) { %>
    <p>No comments yet.</p>
  <% } else { %>
    <table class="admin-table">
      <thead>
        <tr><th>Post</th><th>Author</th><th>Comment</th><th>Status</th><th>Submitted</th><th></th></tr>
      </thead>
      <tbody>
        <% comments.forEach(function(c) { %>
          <tr>
            <td><% if (c.Post) { %><a href="/blog/<%= c.Post.slug %>#comments" target="_blank"><%= c.Post.title %></a><% } else { %>&mdash;<% } %></td>
            <td><%= c.authorName %><% if (c.authorEmail) { %><br><small><%= c.authorEmail %></small><% } %></td>
            <td><%= c.body.length > 140 ? c.body.slice(0, 140) + '…' : c.body %></td>
            <td><span class="tag"><%= c.status %></span></td>
            <td><%= c.createdAt.toDateString() %></td>
            <td>
              <% if (c.status !== 'approved') { %>
                <form action="/admin/comments/<%= c.id %>/approve?_method=PUT" method="POST" style="display:inline">
                  <button type="submit">Approve</button>
                </form>
              <% } %>
              <form action="/admin/comments/<%= c.id %>?_method=DELETE" method="POST" style="display:inline"
                    onsubmit="return confirm('Delete this comment?')">
                <button type="submit">Delete</button>
              </form>
            </td>
          </tr>
        <% }) %>
      </tbody>
    </table>
  <% } %>
</section>
