<%- 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">News Feed</li>
            </ol>
          </nav>

          <h2 class="text-white">News Feed</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-between mb-3">
        <a href="/add-post" class="btn custom-btn bg-graphic me-2">
          <i class="bi bi-plus-lg font-weight-semibold"></i> Add Post
        </a>

        <form action="/searchByPost" method="get" class="d-flex align-items-center position-relative">
          <span class="position-absolute search-icon">
            <i class="bi bi-search"></i>
          </span>
          <input type="text" name="query" class="form-control rounded-pill ps-5 me-2 pt-2 pb-2" placeholder="Search posts..." value="<%= typeof query !== 'undefined' ? query : '' %>">
        </form>
        
        <div class="dropdown">
          <button class="btn custom-btn bg-graphic" type="button" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="bi bi-filter me-2"></i>Sort posts by
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="/posts?sort=by-newest-first">Newest first</a></li>
            <li><a class="dropdown-item" href="/posts?sort=by-oldest-first">Oldest first</a></li>
            <li><a class="dropdown-item" href="/posts?sort=by-name">Name</a></li>
            <li><a class="dropdown-item" href="/posts?sort=by-category">Category</a></li>
          </ul>
        </div>
      </div>

      <div class="row">
      <!-- <div class="col-lg-12 col-12 text-center">
        <h3 class="mb-4">Popular Topics</h3>
      </div> -->
        <% if (message) { %>
          <p> <%= message %></p>
        <% } %>
        
        <% 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>
                        <% if (post.userCanEdit) { %>
                          <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'); %>

<style>
  .search-icon {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #aaa;
  }

  .form-control.ps-5 {
    padding-left: 2.5rem;
  }
</style>
