<% include("includes/header") %>

<div class="top-header">
    <a href="/">
        <img src="<%= _public('/images/article-img.png') %>" />
        <h1><%- Bloggify.options.title %></h1>
    </a>
</div>
<div class="container">
    <div class="content single-article">
        <h1 class="article-title"><%= page.title %></h1>
        <% if (page.date || page.author) { %>
            <p class="article-date">
                <i class="fa fa-calendar"></i>
                <% if (page.date) { %>
                Posted on <%= page.date.format("dddd, MMMM D YYYY") %>
                <% } %>
                <% if (page.author) { %>
                by <a href="/"><%= page.author %></a>
                <% } %>
            </p>
        <% } %>
        <% if (page.tags && page.tags.length) { %>
            <p class="article-tags">
                <i class="fa fa-tags"></i> Tagged as:
                <% page.tags.forEach(function (c, i, arr) { %>
                    <span class="tag"><%= c %></span><%= i === arr.length - 1 ? "" : "," %>
                <% }) %>
            </p>
        <% } %>

        <div class="markdown"><%- page.html %></div>

        <% if (theme.social.twitter) { %>
            <div class="blog-feedback">
                <% var twUsername = theme.social.twitter; %>
                <p class="blog-feedback-header">Have feedback on this article? Let <a href="https://twitter.com/intent/tweet?text=@<%= twUsername %>%20<%= ctx.href %>">@<%= twUsername %></a> know on Twitter.</p>
                <p class="blog-feedback-description">Have any questions? Feel free to ping me on Twitter.</p>
            </div>
        <% } %>
    </div>
</div>

<% include("includes/footer") %>
