<%- include("./partials/headers") -%>

<main class="frame">

    <div class="container">

        <div class="row">
            <% for(var item = 0; item < 2; item++){ %>
            <!-- This is the left col -->
            <% if(item % 2 === 0){ %>
            <div class="col-md-4-s order-lg-first order-sm-1">
                <article class="card mb-4">
                    <header class="card-header">
                        <a style="color: black; background-color: rgb(238, 206, 102); border: 2px rgb(238, 206, 102) solid; 
                        border-radius: 12px;" href="#">&nbsp; <%= postings[item].title %> <span class="by">by</span>
                            <%= postings[item].authors %> &nbsp;</a>
                    </header>
                    <a href="/<%= postings[item]._id %>">
                        <img class="card-img" src="<%= postings[item].imageLink %>" alt="" />
                    </a>
                    <div class="card-body">
                        <div>
                            <a href="post-image.html">
                                <!-- postings[item].userPost[postings[item].userPost.length-1] Displaying Latest Post -->
                                <h4 class="card-title"> <%= postings[item].userPost[postings[item].userPost.length-1].reviewTitle %> </h4>
                            </a>
                        </div>
                        <p class="card-text"> > <%= postings[item].userPost[postings[item].userPost.length-1].review.substring(0, 165) %> ... <a href="/<%= postings[item]._id %>" class="index-readMore">&nbsp;Read More&nbsp;</a> </p>
                        <div class="review-isbn">
                            <%= postings[item].isbnType %> : <%= postings[item].isbn %>
                        </div>
                        <div>
                            <p><span class="review-username">
                                <%= postings[item].userPost[postings[item].userPost.length-1].username %>
                            </span> • 
                            <span class="card-meta"><%= postings[item].userPost[postings[item].userPost.length-1].date %> </span></p>
                        </div>
                        <div class="container">
                            <div class="row">
                                <div class="col">
                                    <img src="/img/icons/eye.png" alt="Views Count" height="24"> <%= viewsCount %>
                                </div>
                                <div class="col order-1">
                                    <img src="/img/icons/thumbs-up.png" alt="Like" height="24"> 0
                                </div>
                                <div class="col order-2">
                                    <img src="/img/icons/thumbs-down.png" alt="Dislike" height="24"> 0
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
                <hr>
            </div>
            <% } %>

            <!-- This is the middle col -->
            <% if(item % 2 === 1) { %>
            <div class="col-md-4-s order-lg-2 order-sm-2">
                <article class="card mb-4">
                    <header class="card-header">
                        <a style="color: white; background-color: green; border: 2px green solid; border-radius: 12px;"
                            href="#">&nbsp; <%= postings[item].title %> <span class="by">by</span>
                            <%= postings[item].authors %> &nbsp; </a>
                    </header>
                    <a href="/<%= postings[item]._id %>">
                        <img class="card-img" src="<%= postings[item].imageLink %>" alt="" />
                    </a>
                    <div class="card-body">
                        <div>
                            <a href="post-image.html">
                                <h4 class="card-title"> <%= postings[item].userPost[postings[item].userPost.length-1].reviewTitle %> </h4>
                            </a>
                        </div>
                        <p class="card-text"> > <%= postings[item].userPost[postings[item].userPost.length-1].review.substring(0, 165) %> ... <a href="/<%= postings[item]._id %>" class="index-readMore">&nbsp;Read More&nbsp;</a>
                        </p>
                        <div class="review-isbn">
                            <%= postings[item].isbnType %> : <%= postings[item].isbn %>
                        </div>
                        <div>
                            <p><span class="review-username">
                                <%= postings[item].userPost[postings[item].userPost.length-1].username %>
                            </span> • 
                            <span class="card-meta"><%= postings[item].userPost[postings[item].userPost.length-1].date %> </span></p>
                        </div>
                        <div class="container">
                            <div class="row">
                                <div class="col">
                                    <img src="/img/icons/eye.png" alt="Views Count" height="24"> <%= viewsCount %>
                                </div>
                                <div class="col order-1">
                                    <img src="/img/icons/thumbs-up.png" alt="Like" height="24"> 0
                                </div>
                                <div class="col order-2">
                                    <img src="/img/icons/thumbs-down.png" alt="Dislike" height="24"> 0
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
                <hr>
            </div>
            <% } %>
            <% } %>
            <!-- This is the right col -->
            <div class="col-md-4-lite order-lg-3 order-sm-0">
                <header class="card-header">
                    <h4 class="card">Popular Categories </h4>
                </header>
                <div class="text-center mb-3 card-bg-scale position-relative overflow-hidden rounded"
                    style="background-image:url(/img/topics/biography.jpg); background-position: center left; background-size: cover;">
                    <div class="tag-font p-3">
                        <a href="/biography" class="stretched-link fw-bold text-white h5">Biography</a>
                    </div>
                </div>
                
                <div class="text-center mb-3 card-bg-scale position-relative overflow-hidden rounded"
                    style="background-image:url(/img/topics/business.jpg); background-position: center left; background-size: cover;">
                    <div class="tag-font p-3">
                        <a href="/business" class="stretched-link fw-bold text-white h5">Business</a>
                    </div>
                </div>

                <div class="text-center mb-3 card-bg-scale position-relative overflow-hidden rounded"
                    style="background-image:url(/img/topics/fictions.jpg); background-position: center left; background-size: cover;">
                    <div class="tag-font p-3">
                        <a href="/fiction" class="stretched-link fw-bold text-white h5">Fictions</a>
                    </div>
                </div>

                <div class="text-center mb-3 card-bg-scale position-relative overflow-hidden rounded"
                    style="background-image:url(/img/topics/history.jpg); background-position: center left; background-size: cover;">
                    <div class="tag-font p-3">
                        <a href="/history" class="stretched-link fw-bold text-white h5">History</a>
                    </div>
                </div>

                <div class="text-center mb-3 card-bg-scale position-relative overflow-hidden rounded"
                    style="background-image:url(/img/topics/non-fiction.jpg); background-position: center left; background-size: cover;">
                    <div class="tag-font p-3">
                        <a href="/nonFiction" class="stretched-link fw-bold text-white h5">Non-Fiction</a>
                    </div>
                </div>

                <div class="text-center mb-3 card-bg-scale position-relative overflow-hidden rounded"
                    style="background-image:url(/img/topics/science.jpg); background-position: center left; background-size: cover;">
                    <div class="tag-font p-3">
                        <a href="/science" class="stretched-link fw-bold text-white h5">Science</a>
                    </div>
                </div>

                <div class="text-center mb-3 card-bg-scale position-relative overflow-hidden rounded"
                    style="background-image:url(/img/topics/self-help.jpg); background-position: center left; background-size: cover;">
                    <div class="tag-font p-3">
                        <a href="/selfHelp" class="stretched-link fw-bold text-white h5">Self-Help</a>
                    </div>
                </div>

            </div>
                  

        <% for(var i = 2; i < postings.length; i++) {%>
            <% if(i % 2 === 0){ %>
            <div class="col-md-4-s order-lg-4">
                <article class="card mb-4">
                    <header class="card-header">
                        <a style="color: black; background-color: rgb(238, 206, 102); border: 2px rgb(238, 206, 102) solid; 
                                border-radius: 12px;" href="#">&nbsp; <%= postings[i].title %> <span
                                class="by">by</span> <%= postings[i].authors %> &nbsp;</a>
                    </header>
                    <a href="/<%= postings[i]._id %>">
                        <img class="card-img" src="<%= postings[i].imageLink %>" alt=""/>
                    </a>
                    <div class="card-body">
                        <div>
                            <a href="post-image.html">
                                <h4 class="card-title"> <%= postings[i].userPost[postings[i].userPost.length-1].reviewTitle %> </h4>
                            </a>
                        </div>
                        <p class="card-text"> > <%= postings[i].userPost[postings[i].userPost.length-1].review.substring(0, 165) %> ... <a href="/<%= postings[i]._id %>" class="index-readMore">&nbsp;Read More&nbsp;</a> </p>
                        <div class="review-isbn">
                            <%= postings[i].isbnType %> : <%= postings[i].isbn %>
                        </div>
                        <div>
                            <p><span class="review-username">
                                <%= postings[i].userPost[postings[i].userPost.length-1].username %>
                            </span> • 
                            <span class="card-meta"><%= postings[i].userPost[postings[i].userPost.length-1].date %> </span></p>
                        </div>
                        <div class="container">
                            <div class="row">
                                <div class="col">
                                    <img src="/img/icons/eye.png" alt="Views Count" height="24"> <%= viewsCount %>
                                </div>
                                <div class="col order-1">
                                    <img src="/img/icons/thumbs-up.png" alt="Like" height="24"> 0
                                </div>
                                <div class="col order-2">
                                    <img src="/img/icons/thumbs-down.png" alt="Dislike" height="24"> 0
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
                <hr>
            </div>
            <% } %>
            <% } %>

        <% for(var x = 2; x < postings.length; x++) {%>
            <% if(x % 2 === 1) { %>
            <div class="col-md-4-s order-lg-5">
                <article class="card mb-4">
                    <header class="card-header">
                        <a style="color: white; background-color: green; border: 2px green solid; border-radius: 12px;"
                            href="#">&nbsp; <%= postings[x].title %> <span class="by">by</span>
                            <%= postings[x].authors %> &nbsp; </a>
                    </header>
                    <a href="/<%= postings[x]._id %>">
                        <img class="card-img" src="<%= postings[x].imageLink %>" alt="" />
                    </a>
                    <div class="card-body">
                        <div>
                            <a href="post-image.html">
                                <h4 class="card-title"> <%= postings[x].userPost[postings[x].userPost.length-1].reviewTitle %> </h4>
                            </a>
                        </div>
                        <p class="card-text"> > <%= postings[x].userPost[postings[x].userPost.length-1].review.substring(0, 165) %> ... <a href="/<%= postings[x]._id %>" class="index-readMore">&nbsp;Read More&nbsp;</a></p>
                        <div class="review-isbn">
                            <%= postings[x].isbnType %> : <%= postings[x].isbn %>
                        </div>
                        <div>
                            <p><span class="review-username">
                                <%= postings[x].userPost[postings[x].userPost.length-1].username %>
                            </span> • 
                            <span class="card-meta"><%= postings[x].userPost[postings[x].userPost.length-1].date %> </span></p>
                        </div>
                        <div class="container">
                            <div class="row">
                                <div class="col">
                                    <img src="/img/icons/eye.png" alt="Views Count" height="24"> <%= viewsCount %>
                                </div>
                                <div class="col order-1">
                                    <img src="/img/icons/thumbs-up.png" alt="Like" height="24"> 0
                                </div>
                                <div class="col order-2">
                                    <img src="/img/icons/thumbs-down.png" alt="Dislike" height="24"> 0
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
                <hr>
            </div>
            <% } %>
        <% } %>

        </div>
    </div>


</main>

<!-- <div class="site-newsletter">
    <div class="container">
        <div class="text-center">
            <h3 class="h4 mb-2">Subscribe to Our Mailing List</h3>
            <p class="text-muted">Join our mailing list to keep up with the popular book reviews! We don't spam your
                email :)</p>

            <div class="row">
                <div class="col-xs-12 col-sm-9 col-md-7 col-lg-5 ms-auto me-auto">
                    <div class="input-group mb-3 mt-3">
                        <input type="text" class="form-control" placeholder="Email address" aria-label="Email address">
                        <span class="input-group-btn">
                            <button class="btn btn-secondary" type="button">Subscribe</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> -->

<div class="moreArticles">
    <input type="button" class="load-more-bottom" value="&nbsp; Load More &nbsp;">
</div>

<%- include("partials/footers") -%>