{% extends 'base.html' %}
{% load typogrify_tags %}
{% load comments %}
{% block pagetitle %}{{object.title|striptags}} - by Scott Gilbertson{% endblock %}
{% block metadescription %}{% autoescape on %}{{object.meta_description|striptags|safe}}{% endautoescape %}{% endblock %}
{%block extrahead%}
    <meta property="og:type" content="article" />
    <meta property="og:site_name" content="Libregraf"/>
    <meta property="og:title" content="{{object.title|safe}}" />
    <meta property="og:url" content="https://libregraf.net{{object.get_absolute_url}}" />
    <meta property="og:image" content="">
    <meta property="og:description" content="{{object.meta_description}}" />
    <meta property="article:published_time" content="{{object.pub_date|date:'c'}}" />
    <meta property="article:author" content="Scott Gilbertson" />
    <meta property="og:site_name" content="Libregraf" />
    <meta property="og:locale" content="en_US" />
    <meta name="twitter:card" content="summary_large_image"/>
    <meta name="twitter:site" content="@libregraf"/>
    <meta name="twitter:creator" content="@libregraf"/>

<link rel="stylesheet" href="/media/solarized.css" type="text/css" media="screen"/>
{%endblock%}

{% block bodyid %}class="src detail single"{% endblock %}

{% block content %}<ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <li><a href="/" title="libregraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
        <li><a href="/tutorials/">Tutorials</a></li>
    </ul>
    <main class="content-narrow">
    <article class="h-entry hentry entry-content content" itemscope itemType="http://schema.org/BlogPosting">
            <header id="header" class="post-header">
                <h1 class="p-name hed-primary" itemprop="headline">{{object.title|smartypants|safe}}</h1>
                {% if object.sub_title %}<h2 class="p-summary hed-secondary">{{object.sub_title|smartypants|safe}}</h2>{%endif%}
                <div class="post-linewrapper">
                    <h5 class="hed-tertiary">Filed Under: {% for tag in object.tags.all %}<a rel="tag" class="p-category" href="/essays/tags/{{tag.slug}}" title="View all essays about {{tag}}">{{tag}}</a>{%if forloop.last%}{%else%}, {%endif%}{% endfor %}</h5>
                    <time class="dt-published published dt-updated hed-tertiary" datetime="{{object.pub_date|date:'c'}}" itemprop="datePublished">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
                    <span class="hide" itemprop="author" itemscope itemtype="http://schema.org/Person">by <a class="p-author h-card" href="/about"><span itemprop="name">Scott Gilbertson</span></a></span>
                </div>
            </header>
        <div id="article" class="e-content entry-content" itemprop="articleBody">
            {{object.body_html|safe|smartypants}}
        </div>
        </article>
   {% if object.enable_comments %}
   <hr />
   <div class="comment-wrapper">
{% get_comment_count for object as comment_count %}
{%if comment_count > 0 %}
<p class="comments-header">{{comment_count}} Comment{{ comment_count|pluralize }}</p>
{% render_comment_list for object %}
{%endif%}
{% render_comment_form for object %}
{% else %}
<p class="comments--header" style="text-align: center">Sorry, comments have been disabled for this post.</p>
{%endif%}
   </div>
    </main>
{% endblock %}
{% block js %}
<script type="text/javascript">
window.onload = function() {
    {% if object.enable_comments %}
{% get_comment_count for object as comment_count %}
{%if comment_count > 0 %}
    //delay loading of gravatar images using noscript data-hash attribute
    dataattr = document.getElementsByClassName("datahashloader");
    for(var i=0; i<dataattr.length; i++) {
        var c = dataattr[i].parentNode;
        var img = document.createElement("img");
        img.src = 'https://libregraf.net/gravcache/' + dataattr[i].getAttribute('data-hash') + '.jpg';
        img.className += "gravatar";
        c.insertBefore(img, c.childNodes[3]);
    }
{%endif%}
{%endif%}
    {% with object.get_template_name_display as t %}{%if t == "single" or t == "single-dark" %}
    createMap();
    var open = false;
    {%endif%}{%endwith%}
}
</script>
{% if object.has_code %}
{%endif %}
{% endblock %}