{% extends 'base.html' %}
{% load typogrify_tags %}
{% load html5_datetime %}
{% load month_number_to_name %}
{% block pagetitle %}{{object.title|title|smartypants|safe}} - Luxagraf, Field Notes{% endblock %}

{% block metadescription %}{{object.body_html|striptags|safe|truncatewords:30}}{% endblock %}
{%block extrahead%}
     <link rel="canonical" href="http://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.location.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 bodyid %}class="notes--permalin detail" id="archive-{% if month %}{{month|month_number_to_name}}{%endif%}{{year}}"{%endblock%}
{% block breadcrumbs %}{% include "lib/breadcrumbs.html" with breadcrumbs=breadcrumbs %}{% endblock %}
{% block primary %}<main role="main">
    <article class="h-entry hentry {% with object.get_template_name_display as t %}{%if t == "double" or t == "double-dark" %} post--article--double{%endif%}{%endwith%}" itemscope itemType="http://schema.org/BlogPosting">
            <header id="header" 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" itemprop="headline">{%if object.template_name == 1 or object.template_name == 3 %}{{object.title|smartypants|safe}}{%else%}{{object.title|smartypants|safe}}{%endif%}</h1>
                {% if object.subtitle %}<h2 class="post-subtitle">{{object.subtitle|smartypants|safe}}</h2>{%endif%}
                <div class="post-linewrapper">
                {% if object.location %}<div class="p-location h-adr adr post-location" itemprop="contentLocation" itemscope itemtype="http://schema.org/Place">
                    <h3 class="h-adr" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">{% if object.location.country_name == "United States" %}<span class="p-locality locality" itemprop="addressLocality">{{object.location.name|smartypants|safe}}</span>, <a class="p-region region" href="/jrnl/united-states/" title="travel writing from the United States">{{object.location.state_name|safe}}</a>, <span class="p-country-name" itemprop="addressCountry">U.S.</span>{%else%}<span class="p-region" itemprop="addressRegion">{{object.location.name|smartypants|safe}}</span>, <a class="p-country-name country-name" href="/jrnl/{{object.location.country_slug}}/" title="travel writing from {{object.location.country_name}}"><span itemprop="addressCountry">{{object.location.country_name|safe}}</span></a>{%endif%}</h3>
                     &ndash;&nbsp;<a href="" onclick="showMap({{object.latitude}}, {{object.longitude}}, { type:'point', lat:'{{object.latitude}}', lon:'{{object.longitude}}'}); return false;" title="see a map">Map</a>
                </div>{%endif%}
                <time class="dt-published published dt-updated post-date" 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 class="e-content">
            {{object.body_html|safe|smartypants}}
            </div>
            <span class="p-author h-card">
                <data class="p-name" value="Scott Gilbertson"></data>
                <data class="u-url" value="https://luxagraf.net/"></data>
            </span>
            <footer>
                {%comment%}<p class="note--date">
                    <a class="u-url" href="{{object.get_absolute_url}}" rel="bookmark"><time class="dt-published" datetime="{{object.pub_date|html5_datetime}}">{{object.pub_date|date:"F j, Y"}}</time></a>
                </p>{%endcomment%}
                    {% comment %}    {% if object.twitter_id %}
                <ul class="note--actions">
                    <li><a rel="syndication" class="u-syndication" href="https://twitter.com/luxagraf/status/{{object.twitter_id}}">View on Twitter</a></li>
                    <li>
                        <indie-action do="reply" with="{{SITE_URL}}{{object.get_absolute_url}}"><a href="https://twitter.com/intent/tweet?in_reply_to={{object.twitter_id}}">Reply</a></indie-action>
                    </li>
                    <li>
                        <indie-action do="post" with="{{SITE_URL}}{{object.get_absolute_url}}">
                    <a href="https://twitter.com/intent/retweet?tweet_id={{object.twitter_id}}">Retweet</a>
                        </indie-action>
                    </li>
                    <li>
                    <indie-action do="bookmark" with="{{SITE_URL}}{{object.get_absolute_url}}">
                        <a href="https://twitter.com/intent/favorite?tweet_id={{object.twitter_id}}">Favourite</a>
                    </indie-action>
                    </li>
                </ul>{% endif %}{% endcomment %}
            </footer>


        {% with object.get_next_published as next %}
        {% with object.get_previous_published as prev %}
        <nav id="page-navigation">
            <ul>{% if prev%}
                <li rel="previous" id="next"><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 rel="next" id="prev"><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%}
    </article>
</main>
{% endblock %}

{% block js %}
<script>
document.addEventListener("DOMContentLoaded", function(event) { 
    var leaflet = document.createElement('script');
    leaflet.src = "/media/js/leaflet-master/leaflet-mod.js";
    document.body.appendChild(leaflet);
    leaflet.onload = function(){
        var detail = document.createElement('script');
        detail.src = "/media/js/detail.min.js";
        document.body.appendChild(detail);
        detail.onload = function(){
            createMap();
            var open = false;
        }
    }
});
</script>
{%endblock%}