{% extends 'base.html' %}
{% load typogrify_tags %}
{% load comments %}

{% block pagetitle %}{{object.title|title|smartypants|safe}} - Luxagraf, Writing{%comment%}{% if object.country_name == "United States" %}{{object.location_name|smartypants|safe}}, {{object.state_name}}{%else%}{{object.location_name|smartypants|safe}}, {{object.country_name}}{%endif%}{%endcomment%}{% endblock %}

{% block metadescription %}{{object.meta_description|striptags|safe}}{% endblock %}
{%block extrahead%}
     <link rel="canonical" href="https://luxagraf.net{{object.get_absolute_url}}" />
     <meta name="ICBM" content="{{object.latitude}}, {{object.longitude}}" />
     <meta name="geo.position" content="{{object.latitude}}; {{object.longitude}}" />
     <meta name="geo.placename" content="{% if object.country.name == "United States" %}{{object.location.name|smartypants|safe}}, {{object.state.name}}{%else%}{{object.location.name|smartypants|safe}}, {{object.country.name}}{%endif%}"> 
     <meta name="geo.region" content="{{object.country.iso2}}{%if object.state.code != '' %}-{{object.state.code}}{%endif%}">
{%endblock%}
{%block htmlclass%}{% with object.template_name as t %}
class="{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%if t == 2 or t == 3 %} dark{%endif%}"{%endwith%}{%endblock%}
								
				
{% block primary %}		
    <main role="main">
    <article class="h-entry hentry post--article{% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}">
            <header id="head" class="post--header {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %}post--header--double{%endif%}{%endwith%}">
                <h1 class="p-name entry-title post--title">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|widont|safe}}{%endif%}</h1>
                <time id="map-anchor" class="dt-published published dt-updated post--date" datetime="{{object.pub_date|date:'c'}}">{{object.pub_date|date:"F"}} <span>{{object.pub_date|date:"j, Y"}}</span></time>
                <p class="p-author author hide" id="author">Scott Gilbertson</p>
                <aside class="p-location h-adr adr post--location" >
                    {% if object.country.name == "United States" %}<span class="p-locality locality" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.state.name|safe}}</a>, <span class="p-country-name">U.S.</span>{%else%}<span class="p-region">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.country.slug}}/" title="travel writing from {{object.country.name}}">{{object.country.name|safe}}</a>{%endif%}
                    <data itemprop="latitude" class="p-latitude" value="{{object.latitude}}"></data>
                    <data itemprop="longitude" class="p-longitude" value="{{object.longitude}}"></data>
                    {%comment%} &nbsp;&nbsp;(<a href="" title="">Map</a>, <a href="" title="">Photos</a>){%endcomment%}
                </aside>
            </header>
        <div class="e-content entry-content post--body post--body--{% with object.template_name as t %}{%if t == 0 or t == 2 %}single{%endif%}{%if t == 1 or t == 3 %}double{%endif%}{%endwith%}">
            {{object.body_html|safe|smartypants|widont}}
        </div>
        </article>
        {% with object.get_next_published as next %}
        {% with object.get_previous_published as prev %}
        <nav id="page-navigation">
            <ul>{% if prev%}
                <li id="prev"><span class="bl">Previous:</span> 
                    <a href="{{ prev.get_absolute_url }}" rel="prev" title=" {{prev.title}}">{{prev.title|safe}}</a>
                </li>{%endif%}{% if next%}
                <li id="next"><span class="bl">Next:</span> 
                    <a href="{{ next.get_absolute_url }}" rel="next" title=" {{next.title}}">{{next.title|safe}}</a>
                </li>{%endif%}
            </ul>
        </nav>{%endwith%}{%endwith%}

        {% comment %}    <div class="mailing-list--wrapper">
    <h5>If you enjoyed this, you should join the mailing&nbsp;list&hellip;</h5>
        {% include 'mailing_list.html' %}
    </div> {% endcomment %}
    </main>

{% 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 %}
{% endblock %}
{% block js %}
     <script type="text/javascript">
window.onload = function() {
    var map_anchor = document.getElementById("head");
    var parentDiv = map_anchor.parentNode;
    var map_icon = document.createElement("div");
    //var img = document.createElement("img");
    //img.src = '//images.luxagraf.net/map-icons/ath.png';
    //map_icon.appendChild(img);
    map_icon.className += "map--icon";
    map_icon.style.background = "url('//images.luxagraf.net/map-icons/ath.png')";
    //parentDiv.insertAfter(map_icon, map_anchor);
    map_anchor.parentNode.insertBefore(map_icon, map_anchor.nextSibling);

    //delay loading of gravatar images using nsoscript 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://images.luxagraf.net/gravcache/' + dataattr[i].getAttribute('data-hash') + '.jpg';
        img.className += "gravatar";
        c.insertBefore(img, c.childNodes[3]);

    }
}
     </script>
{% with object.template_name as t %}{%if t == 1 or t == 3 %}
<script src="{{MEDIA_URL}}js/hyphenate.min.js" type="text/javascript"></script>
{%endif%}{%endwith%}{%endblock%}