{% extends "base.html" %}

{% block page_title %}
{% if post.title %}{{ post.title }} · {{ config.title | default("bckt") }}{% else %}{{ config.title | default("bckt") }}{% endif %}
{% endblock page_title %}

{% block page_meta %}
{% set canonical = base_url ~ post.permalink %}
<meta name="description" content="{{ post.abstract | default(post.excerpt) | trim }}">
<meta property="og:site_name" content="{{ config.title | default("bckt") }}">
<meta property="og:type" content="article">
<meta property="og:title" content="{{ post.title | default(config.title | default("bckt")) | trim }}">
<meta property="og:url" content="{{ canonical | safe }}">
<meta property="og:description" content="{{ post.abstract | default(post.excerpt) | trim }}">
<link rel="canonical" href="{{ canonical | safe }}">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{{ post.title | default(config.title | default("bckt")) | trim }}">
<meta name="twitter:description" content="{{ post.abstract | default(post.excerpt) | trim }}">
{% if post.image %}
<meta property="og:image" content="{{ canonical | safe }}{{ post.image }}">
<meta name="twitter:image" content="{{ canonical | safe }}{{ post.image }}">
{% endif %}
{% endblock page_meta %}

{% block content %}
<article class="post-article">
  <header class="post-header">
    {% if post.title %}
    <h1>{{ post.title }}</h1>
    {% endif %}
    <div class="publishdate">
      <time datetime="{{ post.date_iso }}">{{ post.date_iso | format_date("%b %d, %Y") }}</time>
      {% if post.tags %}
      <span class="meta-divider">/</span>
      <span class="post-tags">
        {% for tag in post.tags %}
        <a class="tag tag-{{ tag | replace(' ', '-') | lower }}" href="{{ base_path }}/tags/{{ tag | replace(' ', '-') | lower }}/">{{ tag }}</a>
        {% endfor %}
      </span>
      {% endif %}
    </div>
    {% if post.abstract %}
    <p class="tagline">{{ post.abstract }}</p>
    {% endif %}
    {% if post.image %}
    <figure class="post-hero">
      <img src="{{ base_path }}{{ post.permalink | safe }}{{ post.image }}" alt="">
    </figure>
    {% endif %}
  </header>
  <div class="post-content reading-flow">
    {{ post.body | safe }}
  </div>
  {% if post.images or post.videos %}
  {% include "partials/media-carousel.html" %}
  {% endif %}
</article>
{% endblock content %}

{% block page_scripts %}
{% if post.images or post.videos %}
<script defer src="{{ base_path }}/js/carousel.js"></script>
{% endif %}
{% endblock page_scripts %}
