<%- include('partials/top') %>
<main>
  <div class="container container-fluid p-4 text-center">
    <h1>Blog Posts</h1>
    <hr>
    <section aria-labelledby="blog-posts-section">
      <div class="card-group">
        <div class="row row-cols-1 row-cols-sm-1 row-cols-md-3 row-cols-lg-4 g-4">
          <% if (posts && posts.length > 0) { %>
            <% for (let i = 0; i < posts.length; i++) { %>
              <div class="col">
                <div class="card h-100 p-2 m-1" aria-labelledby="post-title-<%= i %>">
                  <div class="card-body text-center">
                    <h5 class="card-title fw-bold" id="post-title-<%= i %>">
                      <a class="text-primary-emphasis" id="blog-post-link-<%= i %>" href="/blog/<%= posts[i].slug %>"
                        aria-label="Read blog post titled: <%= posts[i].title %>"
                        title="Read blog post titled: <%= posts[i].title %>">
                        <%= posts[i].title %>
                      </a>
                    </h5>
                    <hr>
                    <h6 class="card-text text-primary-emphasis"><%= posts[i].description %></h6>
                    <hr>
                    <h6 class="card-text text-primary-emphasis"><small><strong>Author:</strong> <%= posts[i].author %></small></h6>
                    <h6 class="card-text text-primary-emphasis"><small><strong>Published:</strong> <%= posts[i].published %></small></h6>
                  </div>
                </div>
              </div>
            <% } %>
          <% } else { %>
            <p class="text-muted text-center">No blog posts available.</p>
          <% } %>
        </div>
      </div>
    </section>
  </div>
</main>
<%- include('partials/bottom') %>
