{% extends 'base.html' %}
{% load typogrify_tags %}
{% load html5_datetime %}
{% load pagination_tags %}
{% block pagetitle %}Guides for the perplexed{% endblock %}
{% block metadescription %}Guides for fellow travelers: tools, tips, and tricks to make life on the road easier{% 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>Essays</li>
    </ul>
    <main role="main" id="essay-archive" class="essay-archive archive-list">
        <div class="essay-intro">
            <h2>Guides for fellow travelers</h2>
            <p>Topics include travel, cooking, photography, writing, simplicity, and once, coffee.</p>
        </div>
        <h1 class="topic-hed">Guides</h1>
         {% autopaginate object_list 30 %}
        <ul class="fancy-archive-list">{% for object in object_list %}
        <li class="h-entry hentry" itemscope itemType="http://schema.org/Article">
            <a href="{{object.get_absolute_url}}" class="u-url">
            <div class="circle-img-wrapper"><img src="{{object.featured_image.get_thumbnail_url}}" alt="{{object.featured_image.alt}}" class="u-photo" /></div>
            <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>
        {%endfor%}</ul>
    </main>
{%endblock%}