{% extends "base.html" %}
{% load markdownify %}

{% block head_extra %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox@3/dist/css/glightbox.min.css">
{% endblock %}

{% block title %} - {{ post.title }}{% endblock %}
{% block meta_description %}{{ post.summary }}{% endblock %}
{% block canonical %}{{ request.scheme }}://{{ request.get_host }}{{ post.get_absolute_url }}{% endblock %}
{% block og_tags %}
<meta property="og:title" content="{{ post.title }}">
<meta property="og:description" content="{{ post.summary }}">
<meta property="og:url" content="{{ request.scheme }}://{{ request.get_host }}{{ post.get_absolute_url }}">
<meta property="og:type" content="article">
<meta property="article:published_time" content="{{ post.published_at|date:'c' }}">
<meta property="article:modified_time" content="{{ post.changed_at|date:'c' }}">
{% if post.featured_image %}
<meta property="og:image" content="{{ request.scheme }}://{{ request.get_host }}{{ post.featured_image.image.url }}">
{% endif %}
{% endblock %}
{% block twitter_tags %}
<meta name="twitter:card" content="{% if post.featured_image %}summary_large_image{% else %}summary{% endif %}">
<meta name="twitter:title" content="{{ post.title }}">
<meta name="twitter:description" content="{{ post.summary }}">
{% if post.featured_image %}
<meta name="twitter:image" content="{{ request.scheme }}://{{ request.get_host }}{{ post.featured_image.image.url }}">
{% endif %}
{% endblock %}

{% block content %}
{% if is_draft %}
<div class="draft-banner"><strong>Draft preview</strong> — this content has not been published.</div>
{% endif %}
<article class="h-entry post-detail">
<div class="post-detail-header">
<hgroup>
<h1 class="p-name">{{ post.title }}</h1>
<small>
Written on
<time class="dt-published" datetime="{{ post.published_at|date:'c' }}">{{ post.published_at|date:'Y-m-d' }}</time>
by <a class="muted p-author h-card" href="{% url 'home' %}">{{ post.author.user.username }}</a>
{% if post.tags %} in {% for t in post.tags.all %}<a class="muted p-category" href="{{ t.get_absolute_url }}">{{ t.name }}</a> {% endfor %}{% endif %}
</small>
</hgroup>
</div>
<a class="u-url" href="{{ post.get_absolute_url }}" hidden></a>
{% if post.featured_image %}
<img class="u-photo" src="{{ post.featured_image.image.url }}" alt="{{ post.featured_image.alt }}" hidden>
{% endif %}
<div class="e-summary" hidden>
{{ post.summary }}
</div>
<div class="e-content">
{{ post.content|markdownify }}
</div>
</article>

<div class="post-nav">
<div class="prev">{% if prev_post %}Previous: <a href="{{ prev_post.get_absolute_url }}" class="muted">{{ prev_post.title|truncatechars:20 }}</a>{% else %}This was the last post{% endif %}</div>
<div class="next">{% if next_post %}Next: <a href="{{ next_post.get_absolute_url }}" class="muted">{{ next_post.title|truncatechars:20 }}</a>{% else %}None yet :-){% endif %}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/glightbox@3/dist/js/glightbox.min.js"></script>
<script>
document.querySelectorAll('.e-content figcaption').forEach(fc => {
    const a = fc.parentElement.querySelector('a');
    if (a) a.dataset.description = fc.textContent;
});
GLightbox({ selector: '.e-content a', touchNavigation: true, loop: true });
</script>
{% endblock %}