<%- include('includes/header') %>
   
    <section class="section">
        <%- include('includes/flash') %>

        <div class="card-post-line">
            <h1 class="heading-i">Synths</h1>
            <p class="text-rg-short">List of essays that combines two seemingly unrelated ideas</p>
        </div>

        <% posts.forEach(function(post) { %>
            <% let readingTime = calculateReadingTime(post.body) %>
            <a href="/post/<%= post._id %>" class="card-post">
                <div class="contain-row-fill">
                    <h4 class="subheading"><%= post.createdDate.toLocaleString('default', { month: 'short'}).toUpperCase() %> <%= post.createdDate.getDate() %>, <%= post.createdDate.getFullYear() %></h4>
                    <p class="subheading"><%= readingTime %> min read</p>
                </div>
                <h2 class="heading-xs">
                    <% if(post.conceptFirst) { %>
                    <span><%= post.conceptFirst.title %></span>
                    <% } else { %>
                    <span>Undefined</span>
                    <% } %>
                    <svg xmlns="http://www.w3.org/2000/svg" class="synth-sign move-4" width="20" height="20" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M17 10h-14l4 -4"></path>
                        <path d="M7 14h14l-4 4"></path>
                     </svg>
                     <% if(post.conceptSecond) { %>
                    <span><%= post.conceptSecond.title %></span>
                    <% } else { %>
                    <span>Undefined</span>
                    <% } %>
                </h2>
                <p class="text-rg-short" maxlength="2000"><%= post.description %></p>
            </a>
        <% }) %>
        
    </section>

<%- include('includes/footer') %>

<% function calculateReadingTime(content) {
    let wordsPerMinute = 200;
    let wordCount = content.split(' ').length;
    let minutes = wordCount / wordsPerMinute;
    return Math.round(minutes);
} %> 