<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include('./partials/head') %>
    <title>Blog</title>
  </head>
  <body>
    <%- include('./partials/nav') %>

    <div class="container mt-4">
      <h1><%= blog.title %></h1>
      <img src="<%= blog.coverImageURL %>" width="700px" />
      <pre class="mt-3"><%= blog.body %></pre>
    </div>

    <div class="container mt-4">
      <img src="<%= blog.createdBy.profileImageURL %>" width="50px" /> <%=
      blog.createdBy.fullName %>
    </div>

    <div class="container mt-3">
      <h1>Comments (<%= comments.length %>)</h1>
      <% if (locals.user) { %>
      <form action="/blog/comment/<%= blog._id %>" method="post">
        <div class="mb-3">
          <input
            type="text"
            name="content"
            class="form-control"
            placeholder="Enter your comment"
          />
          <button class="btn btn-sm btn-primary" type="submit" style="margin-top: 10px; padding: 4px 25px;">Add</button>
        </div>
      </form>

      <% } %>
      <div class="mt-3">
        <% comments.forEach(comment => { %>
        <div>
          <img src="<%= comment.createdBy.profileImageURL %>" width="50px" />
          <%= comment.createdBy.fullName %>
          <pre style="margin-left: 70px;"><%= comment.content %></pre>
        </div>
        <% }) %>
      </div>
    </div>

    <%- include('./partials/scripts') %>
  </body>
</html>
