{% extends "base.j2.html" %}

{% block lang %} lang="{{ post.inLanguage }}" {% endblock %}

{% block title %}{{ post.headline }} - {{ site.name }}{% endblock %}

{% block meta %}
    <meta name="description" content="{{ post.description|striptags|e }}" />
    <link rel="canonical" href="{{ post.url }}" />
    <link rel="alternate" type="text/plain" href="{{ post.url }}{{ fnames.txt }}" />
    <meta property="og:title" content="{{ post.headline }}" />
    <meta property="og:type" content="article" />
    <meta property="og:url" content="{{ post.url }}" />
    <meta property="og:description" content="{{ post.description|striptags|e }}" />
    <meta property="article:published_time" content="{{ post.datePublished }}" />
    <meta property="article:modified_time" content="{{ post.dateModified }}" />
    <meta property="article:author" content="{{ post.author.name }} ({{ post.author.email}})" />
    {% if post.image is iterable %}
    <meta property="og:image" content="{{ post.image[0].url }}" />
    <meta property="og:image:type" content="{{ post.image[0].encodingFormat }}" />
    <meta property="og:image:width" content="{{ post.image[0].width }}" />
    <meta property="og:image:height" content="{{ post.image[0].height }}" />
    {% else %}
    <meta property="og:image" content="{{ post.image }}" />
    {% endif %}
    <link rel="schema.DC" href="http://purl.org/dc/elements/1.1/">
    <meta name="DC.Format" content="text/html" />
    <meta name="DC.Language" content="{{ post.inLanguage }}" />
    <meta name="DC.Publisher" content="{{ post.Publisher.name }}" />
    <meta name="DC.Title" content="{{ post.headline }}" />
    <meta name="DC.Rights" content="{{ post.licence }}" />
    <meta NAME="DC.Creator" content="{{ post.author.name }}" />
    <meta NAME="DC.Date" content="{{ post.datePublished }}" />
    <meta NAME="DC.Description" content="{{ post.description|striptags|e }}" />
    {% if post['@type'] == 'TechArticle' %}
    <style media="all">
        {% include('prism.css') %}
    </style>
    {% endif %}
{% endblock %}

{% block prism %}
    {% if post['@type'] == 'TechArticle' %}
    <script>
        {% include('prism.js') %}
    </script>
    {% endif %}
{% endblock %}

{% block cc %}
                <li>
                    <a href="{{ post.license }}">
                        <svg width="80" height="15">
                            <use xlink:href="#button-cc"/>
                        </svg>
                    </a>
                </li>
{% endblock %}

{% block content %}
<div id="main">
    <div class="h-entry hentry" lang="{{ post.inLanguage }}" id="article">
        <h1 class="p-name entry-title">
            {% if post.mentions %}
            <span>
                <svg width="16" height="16">
                    <use xlink:href="#icon-reply" />
                </svg>
                <a href="{{ post.url|relurl(baseurl) }}">
                    RE:
                </a>
                <a href="{{ post.mentions.url }}" class="u-in-reply-to">
                    {{ post.mentions.url }}
                </a>
            </span>
            {% else %}
            <a href="{{ post.url|relurl(baseurl) }}">
                {{ post.headline }}
            </a>
            {% endif %}
        </h1>

        {% if post.review %}
        <div class="h-review hreview">
            <strong>Review summary of: <a href="{{ post.review.url }}" class="p-name u-url p-item h-product item fn url">{{ post.review.name }}</a></strong>
            <p>
                By
                <span class="p-author h-card reviewer vcard">
                 <a class="p-name u-url fn" href="{{ post.author.url }}">
                    <span>{{ post.author.name }}</span>
                </a></span> in <time class="dt-published dtreviewed" datetime="{{ post.datePublished }}" title="{{ post.datePublished }}">{{ post.datePublished|printdate }}</time>
            </p>
            <p>
                <span class="rating">
                    <span class="value p-rating">{{ post.review.reviewRating.ratingValue }}</span>
                    out of
                    <span class="best">{{ post.review.reviewRating.bestRating }}</span>
                </span>
            </p>
            <p class="p-summary summary">{{ post.review.text }}</p>
        </div>
        {% endif %}

        {% if post.description|length %}
        <div class="e-summary entry-summary">
            {{ post.description|relurl(baseurl) }}
        </div>
        {% endif %}

        <div class="section">
        {% if post.image|length %}
            {% for image in post.image %}
                {% if image.representativeOfPage %}
                 {{ image.text|relurl(baseurl) }}
                {% endif %}
            {% endfor %}
        {% endif %}
            <div class="e-content entry-content">
                {{ post.text|relurl(baseurl) }}
            </div>
        </div>

    {% if 'WebPage' != post['@type'] %}
        {% if post.comment|length %}
        <div class="comments" id="comments">
            <h2>Responses</h2>
            <ol>
                {% for comment in post.comment %}
                <li class="h-entry p-comment hentry">
                    <i>
                        {% if 'like-of' == comment.disambiguatingDescription %}
                        {% set icon = 'star' %}
                        {% elif 'bookmark-of' == comment.disambiguatingDescription %}
                        {% set icon = 'bookmark' %}
                        {% elif 'reply' == comment.disambiguatingDescription %}
                        {% set icon = 'reply' %}
                        {% else %}
                        {% set icon = 'link' %}
                        {% endif %}
                        <svg width="16" height="16">
                            <use xlink:href="#icon-{{ icon }}"></use>
                        </svg>
                    </i>
                    from
                    <span class="p-author h-card vcard">
                        {% if comment.author.url %}
                        <a class="u-url p-name fn url org" href="{{ comment.author.url }}">
                            {{ comment.author.name }}
                        </a>
                        {% else %}
                        <span class="p-name fn">
                            {{ comment.author.name }}
                        </span>
                        {% endif %}
                    </span>
                    at
                    <time class="dt-published published" datetime="{{ comment.datePublished }}">
                        {{ comment.datePublished|printdate }}
                    </time>
                    <br />
                    <a class="u-url" href="{{ comment.url }}">
                        {{ comment.url }}
                    </a>
                    <a href="{{ post.url }}" class="u-in-reply-to"></a>
                </li>
                {% endfor %}
            </ol>
        </div>
        {% endif %}

    {% endif %}

        <div class="entry-footer">
            <p>Licenced under
                <a rel="license" href="{{ post.license }}" class="u-license">{{ post.license | extractlicense }}</a>,
                created by
                <span class="p-author h-card vcard">
                    <img class="u-photo photo" src="{{ post.author.image|relurl(baseurl) }}" alt="" />
                    <a class="p-name u-url fn url" href="{{ post.author.url }}">{{ post.author.name }}</a>
                    (<a class="u-email email" href="mailto:{{ post.author.email }}">{{ post.author.email }}</a>),
                </span>
                published at
                <time datetime="{{ post.datePublished }}" class="dt-published published">{{ post.datePublished|printdate }}</time>
                <time datetime="{{ post.dateModified }}" class="dt-updated updated"></time>
                to canonical URL
                <a class="u-url u-uuid bookmark" href="{{ post.url }}">{{ post.url }}</a>
                {% if post.keywords|length > 0 %}
                    with keywords
                    {% for keyword in post.keywords %}
                    "<span class="p-category">{{ keyword }}</span>"{% if not loop.last %}, {% endif %}
                    {% endfor %}
                {% endif %}
                {% if post['@type'] == 'Photograph' %}
                    {% if post.image[0].locationCreated %}
                    photographed at the location of
                    <a class="h-geo" href="https://www.openstreetmap.org/#map=14/{{ post.image[0].locationCreated.geo.longitude }}/{{ post.image[0].locationCreated.geo.latitude }}">
                        <span class="p-latitude">{{ post.image[0].locationCreated.geo.latitude }}</span>,
                        <span class="p-longitude">{{ post.image[0].locationCreated.geo.longitude }}</span>
                    </a>
                    {% endif %}
                {% endif %}
                .
                {% if post.sameAs|length %}
                <span id="syndication">
                This post also appears on other sites:
                {% for url in post.sameAs %}
                    <a class="u-syndication" href="{{ url }}"><svg width="16" height="16" aria-label="{{ url|extractdomain }}"><use xlink:href="#icon-{{ url|extractdomain }}" /></svg></a>
                {% endfor %}.
                </span>
                {% endif %}
                {% if 'WebPage' != post['@type'] %}
                    {% for action in post.potentialAction %}
                        {% if  'InteractAction' == action['@type'] %}
                            <a href="{{ action.target }}"></a>
                        {% endif %}
                    {% endfor %}
                {% endif %}
            </p>

{% if post.subjectOf %}
            <p class="h-event vevent">
                <span class="summary">
                    Journey from
                        <time class="dt-start dtstart" datetime="{{ post.subjectOf.startDate }}">
                            {{ post.subjectOf.startDate|printdate }}
                        </time>
                        to
                        <time class="dt-end dtend" datetime="{{ post.subjectOf.endDate }}">
                            {{ post.subjectOf.endDate|printdate }}
                        </time>, in
                        <span class="p-location location">
                            {{ post.subjectOf.location.name }}
                        </span>
                    </span>
                    <a class="u-url url" href="{{ post.url }}"></a>
                </p>
{% endif %}
        </div>

    </div>
</div>
{% endblock %}