<% if (page.posts) { %>
    <div class="max-container mx-auto flex flex-col items-center md:items-start md:flex-row md:justify-between md:mt-20">
        <div class="w-full md:w-8/12">
            <% page.posts.each(function(post) { %>
                <div class="node-item max-w-4xl mb-6 px-3 md:px-10 py-6 mx-auto bg-white dark:text-slate-300 dark:bg-slate-800 rounded-lg shadow">
                    <div class="flex items-center justify-between">
                        <span class="font-light text-slate-600">Sep 9, 2021</span>
                        <a href="#" class="px-2 py-1 text-slate-100 bg-slate-600 rounded hover:bg-slate-500">JavaScript</a>
                    </div>
                    <div class="mt-2">
                        <a href="<%- url_for(post.path) %>"
                           class="text-2xl font-bold text-slate-700 dark:text-slate-300 underline"><%= post.title %></a>
                        <p class="mt-2 text-slate-600 dark:text-slate-300"><%- post.excerpt %></p>
                    </div>
                    <div class="flex items-center justify-between mt-4">
                        <a href="<%- url_for(post.path) %>" class="underline text-blue-500 dark:opacity-70">Read more</a>
                    </div>
                </div>
            <% }); %>
            <%- partial('_partial/pagination', {extra: "mt-14 mb-6 text-center"}) %>
        </div>
        <div class="py-10 w-full md:py-0 md:w-4/12 -mx-8">
            <%- partial('_partial/sidebar') %>
        </div>
    </div>
<% } %>
