<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <title>Myblog Express</title>
</head>
<body>
    <div class="container">
        <h1 class="mb-1">
            <a href="/" class="btn btn-primary mr-1 px-3">&laquo;</a>
            <%= post.title %>
        </h1>
        <div class="d-flex mb-2">
            <time datetime="<%= Math.floor(post.created.getTime() / 1000) %>" class="text-muted mr-auto">
                Created at <%= post.created.toLocaleDateString() %>
            </time>
            <form action="/posts/<%= post.id %>?_method=DELETE" method="post">
                <a href="/posts/edit/<%= post.id %>" class="btn btn-warning btn-sm">&#9998;</a>
                <button type="submit" confirm="Are you sure?" class="btn btn-danger btn-sm">&#x2715;</button>
            </form>
        </div>
        <p><%= post.content %></p>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script>
        $(function() {
            $('.btn-danger').click(function() {
                return window.confirm("Are you sure?");
            })
        })
    </script>
</body>
</html>
