<section class="post-hero">
  <div class="wrap">
    <p class="eyebrow">Insights</p>
    <h1><%= post.title %></h1>
    <p class="post-date"><%= post.publishedAt ? post.publishedAt.toDateString() : '' %></p>
  </div>
  <div class="post-hero-pattern"></div>
</section>

<div class="wrap article-shell">
  <article class="cms-body">
    <% if (post.featuredImage) { %>
      <img class="featured-image" src="<%= post.featuredImage %>" alt="<%= post.title %>">
    <% } %>
    <%- post.body %>
  </article>

  <aside class="post-sidebar">
    <% if (post.User) { %>
      <div class="sidebar-card">
        <h4>Author</h4>
        <div class="author-chip">
          <div class="author-avatar"><%= post.User.name.charAt(0) %></div>
          <div>
            <strong><%= post.User.name %></strong>
            <span>ZUCE Group</span>
          </div>
        </div>
      </div>
    <% } %>
    <% if (allCategories && allCategories.length) { %>
      <% var postCategoryIds = post.Categories ? post.Categories.map(function(c) { return c.id; }) : []; %>
      <div class="sidebar-card">
        <h4>Categories</h4>
        <p class="hint" style="margin: 0 0 0.9rem;">Browse more posts like this one.</p>
        <div class="pill-row pill-row-tight">
          <% allCategories.forEach(function(cat) { %><a class="pill pill-sm<%= postCategoryIds.includes(cat.id) ? ' pill-active' : '' %>" href="/blog?category=<%= cat.slug %>"><%= cat.name %></a><% }) %>
        </div>
      </div>
    <% } %>
    <div class="sidebar-card">
      <h4>Have a similar brief?</h4>
      <a href="/contact" class="button button-primary" style="width:100%; text-align:center;">Talk to us</a>
    </div>
  </aside>
</div>

<section class="block" id="comments">
  <div class="section-head">
    <p class="eyebrow">Discussion</p>
    <h2><%= comments.length %> Comment<%= comments.length === 1 ? '' : 's' %></h2>
  </div>

  <% if (comments.length) { %>
    <ul class="comment-list">
      <% comments.forEach(function(c) { %>
        <li class="comment">
          <div class="comment-avatar"><%= c.authorName.charAt(0).toUpperCase() %></div>
          <div class="comment-body">
            <strong><%= c.authorName %></strong>
            <span class="comment-date"><%= c.createdAt.toDateString() %></span>
            <p><%= c.body %></p>
          </div>
        </li>
      <% }) %>
    </ul>
  <% } else { %>
    <p class="hint">No comments yet. Be the first to weigh in.</p>
  <% } %>

  <form class="comment-form" id="comment-form" method="POST" action="/blog/<%= post.slug %>/comments">
    <input type="hidden" name="formLoadedAt" value="<%= formLoadedAt %>">
    <div class="honeypot-field" aria-hidden="true">
      <label>Leave this field empty
        <input type="text" name="website" tabindex="-1" autocomplete="off">
      </label>
    </div>
    <label>
      Name
      <input type="text" name="authorName" required>
    </label>
    <label>
      Email <span class="hint">(not published)</span>
      <input type="email" name="authorEmail">
    </label>
    <label>
      Comment
      <textarea name="body" rows="4" required></textarea>
    </label>
    <button type="submit" class="button button-primary">Post comment</button>
    <p class="hint">Comments are reviewed before they appear.</p>
  </form>
</section>
