{% extends 'base.html' %}
{% load typogrify_tags %}
{% load html5_datetime %}
{% load pagination_tags %}
{% block pagetitle %} Field Notes | luxagraf {% endblock %}
{% block metadescription %}Rough notes and sketches from the field {% endblock %}
{%block bodyid%}id="field-notes"{%endblock%}

{% block primary %}
    <ul class="bl" id="breadcrumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <li><a href="/" title="luxagraf homepage" itemprop="url"><span itemprop="title">Home</span></a> &rarr; </li>
        <li>Field Notes</li>
    </ul>
    <main role="main" id="essay-archive" class="essay-archive archive-list">
        <div class="essay-intro">
            <h2>Field Notes</h2>
            <p>Quick notes, sketches and images from the road. This is the semi-orgnized brain dump that comes before the more organized <a href="/jrnl/" title="read the journal">journal entries</a> and <a href="/essays/" title="read essays">essays</a>. If I used social media this is the stuff I'd probably put there, but I prefer to put it here, even if it means a lot fewer people read it.</p>
        </div>
         {% autopaginate object_list 30 %}
        <ul class="fancy-archive-list">{% for object in object_list %}{% if object.slug != 'about' %}
        <li class="h-entry hentry" itemscope itemType="http://schema.org/Article">
            <a href="{{object.get_absolute_url}}" class="u-url">
            {% if object.featured_image %}<div class="circle-img-wrapper"><img src="{{object.featured_image.get_thumbnail_url}}" alt="{{object.featured_image.alt}}" class="u-photo" /></div>{%endif%}
            <span class="date dt-published">{{object.pub_date|date:"F d, Y"}}</span>
                <a href="{{object.get_absolute_url}}">
                    <h2>{{object.title|safe|smartypants|widont}}</h2>
                    {% if object.subtitle %}<h3 class="p-summary">{{object.subtitle|safe|smartypants|widont}}</h3>{%endif%}
                </a>
            {% if object.location %}<h4 class="p-location h-adr post-location" itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo">
                <span class="p-locality">{{object.location.name|smartypants|safe}}</span>, 
                <span class="p-region">{{object.location.state_name}}</span>,
                <span class="p-country-name">{{object.location.country_name}}</span>
                <data class="p-latitude" value="{{object.latitude}}"></data>
                <data class="p-longitude" value="{{object.longitude}}"></data>
            </h4>{% endif %}
        </li>
        {%endif%}{%endfor%}</ul>
       </main>
    <nav aria-label="page navigation" class="pagination">
    {% paginate %}
    </nav>
{% endblock %}