<!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-4">Blog Posts</h1>
        <a href="/posts/new" class="btn btn-success">New Post</a>

        <% posts.forEach(post => { %>
            <div class="card mt-4">
                <div class="card-body">
                    <h3 class="card-title"><%= post.title %></h3>
                    <div class="card-subtitle text-muted mb-2">
                        <%= post.created.toLocaleDateString() %>
                    </div>
                    <div class="card-text mb-2">
                        <%= post.content.substring(0,100) %>&mldr;
                    </div>
                    <a href="posts/<%= post.id %>" class="link-primary">read more</a>
                </div>
            </div>
        <% }) %>
        <% if (all > ppp) { %>
        <nav class="mt-4" aria-label="Page navigation">
            <ul class="pagination justify-content-end">
                <% if ((cur-1) * ppp < 0) { %>
                <li class="page-item disabled">
                    <span class="page-link">Previous</span>
                </li>
                <% } else { %>
                <li class="page-item">
                    <a class="page-link" href="?page=<%= (cur-1) %>" aria-label="Previous">Previous</a>
                </li>
                <% } %>

                <% let pages = all / ppp %>
                <% for(let i= 0; i <= pages; i++) { %>
                <li class="page-item<%= (i == cur)? ' active': '' %>">
                    <a class="page-link" href="?page=<%= i %>"><%= i %></a>
                </li>
                <% } %>

                <% if ((cur+1) * ppp >= all) { %>
                <li class="page-item disabled">
                    <span class="page-link">Next</span>
                </li>
                <% } else { %>
                <li class="page-item">
                    <a class="page-link" href="?page=<%= (cur+1) %>" aria-label="Next">Next</a>
                </li>
                <% } %>
            </ul>
        </nav>
        <% } %>
    </div>
</body>
</html>
