{% 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 %}
{% set post_description = post.abstract | default(post.excerpt) | trim %}
<meta name="description" content="{{ post_description }}">
<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_description }}">
<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_description }}">
{% 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 %}
<div class="content-with-rail">
  <article class="article content-with-rail__main">
    <header class="article-header">
      <div class="article-kicker">
        <time datetime="{{ post.date_iso }}">{{ post.date_iso | format_date("%B %d, %Y") }}</time>
        {% if post.tags %}
        <span aria-hidden="true">/</span>
        <ul class="post-tags" aria-label="Tags">
          {% for tag in post.tags %}
          <li><a href="{{ base_path }}/tags/{{ tag | replace(' ', '-') | lower }}/">{{ tag }}</a></li>
          {% endfor %}
        </ul>
        {% endif %}
      </div>
      {% if post.title %}
      <h1>{{ post.title }}</h1>
      {% endif %}
      {% if post.abstract %}
      <p class="article-dek">{{ post.abstract }}</p>
      {% endif %}
      {% if post.image %}
      <figure class="article-hero">
        <img src="{{ base_path }}{{ post.permalink | safe }}{{ post.image }}" alt="">
      </figure>
      {% endif %}
    </header>
    <div class="article-body">
      {{ post.body | safe }}
    </div>
    {% include "partials/media-carousel.html" %}
  </article>
  {% include "partials/sidebar.html" %}
</div>
{% endblock content %}