<%- include("./partials/header.ejs") %>
<div class="d-flex flex-column min-vh-100">
    <h1 class="center-text ">Be Happy, Be Great</h1>
    <div class="container-md">
        
    <% if(id > 0){ %>
        <% for(let i = 0; i < id;i++){ %>
            <% if (postDetails[i] != undefined) {%>
                <div class="container-md mt-4">
                    <h4 class="w-50 h-50"><%=postDetails[i].title%></h4>
                    <h6> By <%=postDetails[i].createdBy%></h5>
                    <p><%=postDetails[i].content.slice(0, 120)%>...</p>
                    <button class="btn btn-primary "><a href="/click/<%=i%>" class="post">Read More</a></button>
                </div>
            <% } %> 
        <% } %>
    <% }else{ %>
        <div class="container-md cat-img-con">
            <div class="mt-5">
        <img src="./images/kate-stone-matheson-uy5t-CJuIK4-unsplash.jpg"  class="img-fluid rounded" alt="No post created yet with cat page"/>
        <h4 class="center-text" >Meow, no posts are created yet..</h2>
        </div>
        </div>
        <% } %>        
    </main>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
        <%- include("./partials/footer.ejs")  %>

    </div>