<header>
    <h1><%== $self->title %></h1>

    <aside>
        <time datetime="<%= $self->date->strftime('%Y-%m-%d') %>">
            Posted on <%= $self->date->strftime('%Y-%m-%d') %>
        </time>
        % if ( $self->author ) {
            <span class="author">
                by <%= $self->author %>
            </span>
        % }
    </aside>

    <p class="tags">Tags:
    % for my $tag ( $self->tags ) {
        <a href="<%= $tag->href %>" rel="tag"><%== $tag->text %></a>
    % }
    </p>

    % if ( $self->links( 'crosspost' ) ) {
    <p>Originally posted as:
        % for my $link ( $self->links( 'crosspost' ) ) {
            <a href="<%= $link->href %>">
                <em><%= $self->title %></em> on <%= $link->title %>.
            </a>
        % }
    </p>
    % }

</header>
% my @sections = $self->sections;
% for my $i ( 0..$#sections ) {
<section id="section-<%= $i+1 %>">
    <%= $sections[$i] %>
</section>
% }

<ul class="pager">
    <li class="prev">
        % if ( $self->next ) {
            <a class="button button-primary" rel="prev"
                href="<%= $self->next %>"
            >
                &larr; Older
            </a>
        % }
        % else {
            <button disabled>
                &larr; Older
            </button>
        % }
    </li>
    <li class="next">
        % if ( $self->prev ) {
            <a class="button button-primary" rel="next"
                href="<%= $self->prev %>"
            >
                Newer &rarr;
            </a>
        % }
        % else {
            <button disabled>
                Newer &rarr;
            </button>
        % }
    </li>
</ul>

% if ( $site->data->{disqus}{shortname} ) {
<h1>Comments</h1>
<div id="disqus_thread"></div>
<script type="text/javascript">
    var disqus_shortname = '<%= $site->data->{disqus}{shortname} %>';
    var disqus_identifier = '<%= $self->document->path %>';
    var disqus_url = '<%= $site->url( $self->path ) %>';
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
% }

% content tags => begin
    <nav id="tags">
        <h1>Tags</h1>
        <ul class="list-inline">
        % for my $tag ( $app->tags ) {
            <li><a href="<%= $tag->href %>"><%== $tag->text %></a></li>
        % }
        </ul>
    </nav>
% end