<section class="posts">
    <% page.posts.each(function (post) { %>
        <article class="post">
            <!-- Post thumbnail with lazayload support -->
            <% if (post.thumbnail) { %> 
                <% if (theme.lazyload === true) { %>
                    <div class="post-thumbnail lazy" data-bg="<%= post.thumbnail %>"></div>
                <% } else { %>
                    <div class="post-thumbnail" style="background-image: url('<%= post.thumbnail %>');"></div>
                <% } %>
            <% } %>

            <!-- Post title and excerpt -->
            <h1 class="post-title">
                <a class="post-link" href="<%- url_for(post.path) %>">
                    <%= post.title %>
                </a>
            </h1>
            <% if (post.excerpt) { %>
                <div class="post-excerpt"><%- post.excerpt %></div>
            <% } else { %>
                <div class="post-content"><%- post.content %></div>
            <% } %>

            <!-- Post meta -->
            <div class="post-meta">
                <% if (post.podcast && theme.podcast) { %>
                    <%
                        const duration = post.podcast.duration;
                        const hour = Math.floor(duration / 3600);
                        const minute = Math.floor((duration / 60) % 60);
                        const second = Math.floor(duration % 60);
                        const viewstr = hour + ':' + String(minute).padStart(2, '0') + ':' + String(second).padStart(2, '0');
                    %>
                    <div class="post-duration"><%- viewstr %></div>
                <% } %>
                <div class="post-time">
                    <%- date(post.date, theme.timeformat) %> 
                </div>
                <% if (post.tags) { %> 
                    <div class="post-tags">
                        <% (post.tags).forEach(function(item) { %>
                            <span class="post-tag"><%= item.name %></span>
                        <% }); %>
                    </div>
                <% } %>
            </div>
        </article>
    <% }) %>

    <!-- Page navigation -->
    <% if (page.prev || page.next) { %>
        <div class="nav">
            <% if (page.prev) { %>
                <div class="nav-prev">
                    <a href="<%- url_for(page.prev_link) %>" class="nav-link">
                        <span class="nav-label">
                            Prev
                            <i class="fa fa-chevron-left"></i>
                        </span>
                    </a>
                </div>
            <% } %>
            <% if (page.next) { %>
                <div class="nav-next">  
                    <a href="<%- url_for(page.next_link) %>" class="nav-link">
                        <span class="nav-label">
                            Next
                            <i class="fa fa-chevron-right"></i>
                        </span>
                    </a>
                </div>
            <% } %>
        </div>
    <% } %>
</section>