<!DOCTYPE html>
<html lang="en">

<head>
  <%- include('../partials/head'); %>
</head>

<body>


  <div class="main">

    <header class="header header-section sticky-lg-top">
      <%- include('../partials/header'); %>
    </header>


    <div class="slider h-100 mx-3 my-3">
      <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">

        <div class="carousel-indicators">
          <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
            aria-current="true" aria-label="Slide 1"></button>
          <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
            aria-label="Slide 2"></button>
          <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
            aria-label="Slide 3"></button>
        </div>
        
        <div class="carousel-inner rounded-2">
          <% for(let i=0; i < posts.length; i++) { %>
          <div class="carousel-item active" data-bs-interval="10000">
           
            <img src="/public/images/<%= posts[i].image %>" class="d-block w-100" height="339px" alt="...">
            
          </div>
          <% } %>
      
        </div>
       
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>

        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
    <div class="latest-post me-3 my-3">
      <% for(let i=0; i < posts.length; i++) { %>
      <div class="card text-bg-dark mb-3">
        <img src="/public/images/<%= posts[i].image %>" class="card-img" height="100px" alt="...">
        <div class="card-img-overlay">
          <h5 class="card-title"><%= posts[i].title %></h5>
        </div>
      </div>
      <% } %>
      <!-- <a class="float-end text-decoration-none fs-6 py-2" href="">See More</a> -->
    </div>


    <div class="categories container">


      <div class="cat-head">
        <h6 class="text-uppercase m-0">Categories <a href="/all-categories"><span class="float-end">See
              All</span></a></h6>
      </div>

      <div class="row">
        <% for(var i=0; i < categories.length; i++) { %>
          <div class="col">
            <div class="card p-1">
              <a href="/category-posts?id=<%=categories[i].id %>" class="text-decoration-none">
                <div class="d-flex justify-content-between align-items-center p-2">
                  <div class="flex-column lh-1 imagename"> <span>
                      <%= categories[i].title %>
                    </span> </div>
                  <div> <img src="/public/images/<%= categories[i].image %>" height="100" width="100" />
                  </div>
                </div>
              </a>
            </div>
          </div>
          <% } %>





      </div>
    </div>

    <div class="category-post-1 container">

      <div class="cat-head">
        <h6 class="text-uppercase m-0">Recent Posts <a href=""><span class="float-end"></span></a></h6>
      </div>

      <div class="p-3">
        <div class="row">
          <% for(var i=0; i < posts.length; i++) { %>
            <div class="col d-flex post-card ps-2">
              <a href="/single-post?id=<%=posts[i].id %>" class="text-decoration-none text-dark">
                <div class="position-relative">
                  <img src="/public/images/<%= posts[i].image %>" class="rounded w-100" height="150px" width="250px">

                  <div class="mt-2">
                    <h6 class="mb-1">
                      <%= posts[i].title %>
                    </h6>
                  </div>
                </div>
              </a>
            </div>
            <% } %>


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


    <div class="category-post-2 container">

      <div class="cat-head">
        <h6 class="text-uppercase m-0">Business <a href=""><span class="float-end"></span></a></h6>
      </div>

      <div class="p-3">
        <div class="row">
          <% for(let i=0; i < posts.length; i++) { %>
          <div class="col d-flex post-card ps-2">
            <a href="/single-post?id=<%=posts[i].id %>" class="text-decoration-none text-dark">
              <div class="position-relative">
                <img src="/public/images/<%= posts[i].image %>" class="rounded w-100" height="150px" width="250px">

                <div class="mt-2">
                  <h6 class="mb-1"><%= posts[i].title %></h6>
                </div>
              </div>
            </a>
          </div>
          <% } %>

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

    <!-- Footer -->
    <footer class="footer">
      <%- include('../partials/footer'); %>
    </footer>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"></script>
</body>

</html>