@page
@model OliverBooth.Pages.Blog.Index

<div id="all-blog-posts">
    <div id="blog-loading-spinner" class="d-flex justify-content-center">
        <div class="spinner-border text-light" role="status">
            <p class="text-center sr-only">Loading...</p>
        </div>
    </div>
</div>

<script id="blog-post-template" type="text/x-handlebars-template">
    <div class="card-body">
        <h2>
            <a href="{{post.url}}"> {{post.title}}</a>
        </h2>

        <p class="text-muted">
            <img class="blog-author-icon" src="{{author.avatar}}" alt="{{author.name}}">
            <span>{{author.name}}<span>
            <span> &bull; </span>
            <abbr title="{{ post.formattedDate }}">{{ post.date_humanized }}</abbr>
            {{#if post.enable_comments}}
                <span> &bull; </span>
                <a href="{{post.url}}#disqus_thread" data-disqus-identifier="{{post.disqus_identifier}}">
                    Loading comment count &hellip;
                </a>
            {{/if}}
        </p>

        <p>{{{post.excerpt}}}</p>

        {{#if post.trimmed}}
            <p>
                <a href="{{post.url}}">
                    Read more...
                </a>
            </p>
        {{/if}}
    </div>
</script>