{% 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 class="post-title">{{ post.title }}</h1>
    {% endif %}
    <div class="post-meta">
      <time class="post-meta__time" datetime="{{ post.date_iso }}">{{ post.date }}</time>
      {% if post.tags %}
        <span class="meta-divider">•</span>
        <ul class="post-tags">
          {% for tag in post.tags %}
          <li><a href="{{ base_path }}/tags/{{ tag | replace(' ', '-') | lower }}/">#{{ tag }}</a></li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
    {% if post.abstract %}
    <p class="post-subtitle">{{ post.abstract }}</p>
    {% endif %}
    {% if post.image %}
    <img class="post-hero" src="{{ post.permalink | safe }}{{ post.image }}" alt="">
    {% 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 %}