<%- include('../shared/header'); %>
  <header class="site-header d-flex flex-column justify-content-center align-items-center">
    <div class="container">
      <div class="row align-items-center">

        <div class="col-lg-5 col-12">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="/posts">Homepage</a></li>

              <li class="breadcrumb-item active" aria-current="page">My Posts</li>
            </ol>
          </nav>

          <h2 class="text-white">My Posts</h2>
        </div>

      </div>
    </div>
  </header>

  <section class="section-padding section-padding-sm">
    <div class="container">
      <div class="section-alerts"></div>
      <div class="d-flex justify-content-end mb-3">
        <a href="/add-post" class="btn custom-btn bg-graphic">
          <i class="bi bi-plus-lg font-weight-semibold"></i> Add Post
        </a>
      </div>
      <div class="row">

      <!-- <div class="col-lg-12 col-12 text-center">
        <h3 class="mb-4">Popular Topics</h3>
      </div> -->
        <% if (posts.length> 0) { %>
          <div class="col-12 mt-3 mx-auto">
            <% posts.forEach(post=> { %>
              <div class="custom-block custom-block-topics-listing bg-white shadow-lg mb-5">
                <div class="d-flex">
                  <div class="author">
                    <img src="<%= post.author_avatar ? post.author_avatar : '/assets/images/default-avatar.png' %>" alt="Author Profile Picture" class="author-img" />
                    <div>
                      <div class="author-name"><%= post.author_name %></div>
                      <div class="post-category"><%= post.category %></div>
                      <div class="post-date"><%= post.date %></div>
                    </div>
                  </div>
                  <div class="custom-block-topics-listing-info d-flex">
                    <div class="w-100">
                      <h5 class="mb-2"><%= post.title %></h5>
                      <p class="mb-0 post-body"><%= post.body %></p>
                      <div class="d-flex justify-content-between mt-4">
                        <a href="/post/<%= post._id %>" class="btn custom-btn">Learn More</a>
                        <div class="d-flex flex-wrap align-content-center">
                          <a href="/edit-post/<%= post._id %>" class="badge bg-graphic rounded-pill cursor-pointer ms-auto me-2"><i class="bi bi-pen"></i></a>
                          <button class="delete-post-button badge bg-advertising rounded-pill cursor-pointer ms-auto" type="button" data-id="<%= post._id %>">
                            <i class="bi bi-trash"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <% }) %>
          </div>
          <% } else { %>
            <h3 class="mb-4">No New Posts!</h3>
          <% } %>
      </div>
    </div>
  </section>
  <%- include('../shared/footer'); %>