<%- include('partials/header') %>

    <div class="container">
        <% if(typeof firstPost=='undefined' ){ %>
            <!--Placeholder item when database is empty-->
            <div class="jumbotron p-5 mb-2 text-white rounded"
                style="background-image: url('../img/header.jpg'); background-position: center;">
                <div class="col-md-6 ">
                    <h1 class="display-4 font-italic">
                        First Post
                    </h1>
                    <p class="lead my-3 text-overflow">
                        This is first 100 characters of post context...
                    </p>
                    <p class="lead mb-0"><a href="/>" class="text-white font-weight-bold">Continue
                            reading...</a></p>
                </div>
            </div>
            <% }else{ %>
                <div class="jumbotron p-5 mb-2 text-dark rounded"
                    style="background-image: url('../img/<%=firstPost.postImg%>');">
                    <div class="col-md-6 ">
                        <h1 class="display-4 font-italic">
                            <%=firstPost.postTitle%>
                        </h1>
                        <p class="lead my-3 text-overflow">
                            <%-firstPost.postContext.substring(0, 150) %> ...
                        </p>
                        <p class="lead mb-0"><a href="/posts/<%=firstPost.postTitle %>"
                                class="text-dark font-weight-bold">Continue
                                reading...</a></p>
                    </div>
                </div>
                <% } %>
                    <div class="row">
                        <% if(typeof secondPost=='undefined' ){ %>
                            <!--Placeholder item when database is empty-->
                            <div class="col-md-6 mt-3">
                                <div class="card flex-md-row mb-4 box-shadow h-md-250">
                                    <div class="card-body d-flex flex-column align-items-start">
                                        <h3 class="mb-0">
                                            <h3 class="fw-bolder mb-1">Second Featured Post</h3>
                                            <div class="text-muted fst-italic mb-2">Day, Month, Year by <a
                                                    href="#">User</a></div>
                                            <a class="badge bg-secondary text-decoration-none link-light"
                                                href="/Category1">Category</a>
                                            <p class="card-text mb-auto text-overflow">This is first 100 characters of
                                                second
                                                post
                                                context...</p>
                                            <a href="/">Continue reading</a>
                                    </div>
                                    <div class="card-img-right flex-auto d-none d-lg-block"
                                        style="background-image: url('https://www.transparenttextures.com/patterns/3px-tile.png'); background-position: center;">
                                    </div>
                                </div>
                            </div>
                            <% }else{ %>
                                <div class="col-md-6 mt-3">
                                    <div class="card flex-md-row mb-4 box-shadow h-md-250">
                                        <div class="card-body d-flex flex-column align-items-start">
                                            <h3 class="mb-0">
                                                <h3 class="fw-bolder mb-1">
                                                    <%=secondPost.postTitle%>
                                                </h3>
                                                <div class="text-muted fst-italic mb-2">
                                                    <%=secondPost.date.toLocaleDateString()%> by <a href="#">
                                                            <%=secondPost.postAuthor%>
                                                        </a>
                                                </div>
                                                <a class="badge bg-secondary text-decoration-none link-light"
                                                    href="/<%=secondPost.category%>">
                                                    <%=secondPost.category%>
                                                </a>
                                                <p class="card-text mb-auto text-overflow">
                                                    <%-secondPost.postContext.substring(0, 50) %> ...
                                                </p>
                                                <a href="/posts/<%=secondPost.postTitle %>">Continue reading</a>
                                        </div>
                                        <div class="card-img-right flex-auto d-none d-lg-block"
                                            style="background-image: url('../img/<%=secondPost.postImg%>'); background-position: center;">
                                        </div>
                                    </div>
                                </div>
                                <% } %>
                                    <% if(typeof thirdPost=='undefined' ){ %>
                                        <!--Placeholder item when database is empty -->
                                        <div class="col-md-6 mt-3">
                                            <div class="card flex-md-row mb-4 box-shadow h-md-250">
                                                <div class="card-body d-flex flex-column align-items-start">
                                                    <h3 class="mb-0">
                                                        <h3 class="fw-bolder mb-1">Third Featured Post</h3>
                                                        <div class="text-muted fst-italic mb-2">Day, Month, Year by <a
                                                                href="#">User</a></div>
                                                        <a class="badge bg-secondary text-decoration-none link-light"
                                                            href="/Category1">Category</a>
                                                        <p class="card-text mb-auto text-overflow">This is first 100
                                                            characters
                                                            of
                                                            third post
                                                            context...</p>
                                                        <a href="/">Continue reading</a>
                                                </div>
                                                <div class="card-img-right flex-auto d-none d-lg-block"
                                                    style="background-image: url('https://www.transparenttextures.com/patterns/3px-tile.png'); background-position: center;">
                                                </div>
                                            </div>
                                        </div>
                                        <% }else{ %>
                                            <div class="col-md-6 mt-3">
                                                <div class="card flex-md-row mb-4 box-shadow h-md-250">
                                                    <div class="card-body d-flex flex-column align-items-start">
                                                        <h3 class="mb-0">
                                                            <h3 class="fw-bolder mb-1">
                                                                <%=thirdPost.postTitle%>
                                                            </h3>
                                                            <div class="text-muted fst-italic mb-2">
                                                                <%=thirdPost.date.toLocaleDateString()%> by <a href="#">
                                                                        <%=thirdPost.postAuthor%>
                                                                    </a>
                                                            </div>
                                                            <a class="badge bg-secondary text-decoration-none link-light"
                                                                href="/<%=thirdPost.category%>">
                                                                <%=thirdPost.category%>
                                                            </a>
                                                            <p class="card-text mb-auto text-overflow">
                                                                <%-thirdPost.postContext.substring(0, 50) %> ...
                                                            </p>
                                                            <a href="/posts/<%=thirdPost.postTitle %>">Continue
                                                                reading</a>
                                                    </div>
                                                    <div class="card-img-right flex-auto d-none d-lg-block"
                                                        style="background-image: url('../img/<%=thirdPost.postImg%>'); background-position: center;">
                                                    </div>
                                                </div>
                                            </div>
                                            <% } %>
                    </div>
    </div>
    <div class="container">
        <div class="row ml-0" style="margin-left: 0px;">
            <div class="col-md-8 mb-3 blog-main bg-light rounded">
                <h3 class="pb-3 mt-3 font-italic border-bottom">
                    Recent Articles
                </h3>
                <%result.forEach(e=> {%>
                    <div class="col-md-12 mt-3 ">
                        <div class="card flex-md-row mb-4 box-shadow h-md-250">
                            <div class="card-body d-flex flex-column align-items-start">
                                <h3 class="mb-0">
                                    <h3 class="fw-bolder mb-1">
                                        <%=e.postTitle%>
                                    </h3>
                                    <div class="text-muted fst-italic mb-2">
                                        <%=e.date.toLocaleDateString()%> by <a href="#">
                                                <%=e.postAuthor%>
                                            </a>
                                    </div>
                                    <a class="badge bg-secondary text-decoration-none link-light"
                                        href="/<%=e.category%>">
                                        <%=e.category%>
                                    </a>
                                    <p class="card-text mb-auto text-overflow">
                                        <%-e.postContext.substring(0, 100) %> ...
                                    </p>
                                    <a href="/posts/<%=e.postTitle %>">Continue
                                        reading</a>
                            </div>
                            <div class="card-img-right flex-auto d-none d-lg-block"
                                style="background-image: url('../img/<%=e.postImg%>'); background-position: center;">
                            </div>
                        </div>
                    </div>
                    <%})%>
                        <hr>
                        <%if (totalDocs < 5) {%>
                            <form action="/" method="post">
                                <nav class="blog-pagination">
                                    <button class="btn btn-secondary mx-1" type="submit" name="prevPage"
                                        value="previous" disabled>Previous</button>
                                    <button class="btn btn-outline-secondary" disabled>Page:
                                        <%=page%>
                                    </button>
                                    <button class=" btn btn-secondary mx-1" type="submit" name="nextPage" value="next"
                                        disabled>Next</button>
                                </nav>
                                <input type="text" value="<%=page%>" name="page" hidden>
                            </form>
                            <% } else {%>
                                <%if(next){%>
                                    <%if(prev){%>
                                        <form action="/" method="post">
                                            <nav class="blog-pagination">
                                                <button class="btn btn-secondary mx-1" type="submit" name="prevPage"
                                                    value="previous">Previous</button>
                                                <button class="btn btn-outline-secondary" disabled>Page:
                                                    <%=page%>
                                                </button>
                                                <button class=" btn btn-secondary mx-1" type="submit" name="nextPage"
                                                    value="next">Next</button>
                                            </nav>
                                            <input type="text" value="<%=page%>" name="page" hidden>
                                        </form>
                                        <%}else{%>
                                            <form action="/" method="post">
                                                <nav class="blog-pagination">
                                                    <button class="btn btn-secondary mx-1" type="submit" name="prevPage"
                                                        disabled>Previous</button>
                                                    <button class="btn btn-outline-secondary" disabled>Page:
                                                        <%=page%>
                                                    </button>
                                                    <button class=" btn btn-secondary mx-1" type="submit"
                                                        name="nextPage" value="next">Next</button>
                                                </nav>
                                                <input type="text" value="<%=page%>" name="page" hidden>
                                            </form>
                                            <%}}else{%>
                                                <%if(prev){%>
                                                    <form action="/" method="post">
                                                        <nav class="blog-pagination">
                                                            <button class="btn btn-secondary mx-1" type="submit"
                                                                name="prevPage" value="previous">Previous</button>
                                                            <button class="btn btn-outline-secondary" disabled>Page:
                                                                <%=page%>
                                                            </button>
                                                            <button class=" btn btn-secondary mx-1" type="submit"
                                                                name="nextPage" disabled>Next</button>
                                                        </nav>
                                                        <input type="text" value="<%=page%>" name="page" hidden>
                                                    </form>
                                                    <%}}%>
                                                        <%}%>
            </div>
            <aside class="col-md-4 blog-sidebar">
                <div class="p-3 mb-3 bg-light rounded">
                    <h4 class="font-italic">About</h4>
                    <p class="mb-0">This is a sample blog format.
                        All data is for educational purposes.</p>
                </div>
                <div class=" bg-light rounded">
                    <div class="p-3 ">
                        <h4 class="font-italic">Latest News</h4>
                        <ol class="list-unstyled mb-0">
                            <li><a href="/posts/<%=last10[0]%>">
                                    <%=last10[0]%>
                                </a></li>
                            <li><a href="/posts/<%=last10[1]%>">
                                    <%=last10[1]%>
                                </a></li>
                            <li><a href="/posts/<%=last10[2]%>">
                                    <%=last10[2]%>
                                </a></li>
                            <li><a href="/posts/<%=last10[3]%>">
                                    <%=last10[3]%>
                                </a></li>
                            <li><a href="/posts/<%=last10[4]%>">
                                    <%=last10[4]%>
                                </a></li>
                            <li><a href="/posts/<%=last10[5]%>">
                                    <%=last10[5]%>
                                </a></li>
                            <li><a href="/posts/<%=last10[6]%>">
                                    <%=last10[6]%>
                                </a></li>
                            <li><a href="/posts/<%=last10[7]%>">
                                    <%=last10[7]%>
                                </a></li>
                            <li><a href="/posts/<%=last10[8]%>">
                                    <%=last10[8]%>
                                </a></li>
                            <li><a href="/posts/<%=last10[9]%>">
                                    <%=last10[9]%>
                                </a></li>
                        </ol>
                    </div>
                </div>
            </aside>
        </div>
    </div>
    <%- include('partials/footer') %>