{% extends "base.html" %}
{% from "macros/tag-links.html" import tag_links with context %}
{% from "macros/narration-player.html" import narration_player with context %}
{% from "macros/social-sharing.html" import social_metadata, share_controls with context %}
{% block social_head %}
  {% if this.parent._id == 'blog' %}{{ social_metadata(this, 'BlogPosting', 'article') }}{% else %}{{ social_metadata(this, 'Article', 'article') }}{% endif %}
{% endblock %}
{% block body %}
{% if this.parent._id == 'blog' %}
<article class="blog-post-layout shell">
  <header class="blog-entry-header">
    <p class="eyebrow">{{ this.kicker }}</p>
    <h1>{{ this.title }}</h1>
    <p class="dek">{{ this.summary }}</p>
  </header>

  <div class="post-meta">
    <aside class="post-info" aria-label="Post information">
      <p class="post-info-title">Post information</p>
      <dl>
        <div class="post-info-row">
          <dt>Author</dt>
          <dd>{{ this.author }}</dd>
        </div>
        <div class="post-info-row">
          <dt>Published</dt>
          <dd><time datetime="{{ this.date }}">{{ this.date|dateformat('long') }}</time></dd>
        </div>
        <div class="post-info-row">
          <dt>Tags</dt>
          <dd class="post-tags">
            {{ tag_links(this.tags) }}
          </dd>
        </div>
      </dl>
    </aside>
    {{ share_controls(this, 'post') }}
    {{ narration_player(this) }}
  </div>

  <div class="blog-entry-body prose">
    {{ this.body }}
    {% if this.external_url %}<p><a class="button-link" href="{{ this.external_url }}">Visit project →</a></p>{% endif %}
  </div>
</article>
{% elif this.parent._id == 'articles' %}
{% set article_word_count = this.body|striptags|wordcount %}
{% set article_reading_minutes = (article_word_count + 199) // 200 %}
<article class="article-post-layout shell">
  <header class="article-entry-header">
    <p class="eyebrow">{{ this.kicker }}</p>
    <h1>{{ this.title }}</h1>
    <p class="dek">{{ this.summary }}</p>
  </header>

  <div class="post-meta">
    <aside class="post-info article-info" aria-label="Article information">
      <p class="post-info-title">Article information</p>
      <dl>
      {% if this.author %}
      <div class="post-info-row">
        <dt>Author</dt>
        <dd>{{ this.author }}</dd>
      </div>
      {% endif %}
      <div class="post-info-row">
        <dt>Published</dt>
        <dd><time datetime="{{ this.date }}">{{ this.date|dateformat('long') }}</time></dd>
      </div>
      {% if this.updated %}
      <div class="post-info-row">
        <dt>Updated</dt>
        <dd><time datetime="{{ this.updated }}">{{ this.updated|dateformat('long') }}</time></dd>
      </div>
      {% endif %}
      <div class="post-info-row">
        <dt>Reading time</dt>
        <dd>{{ article_reading_minutes }} min</dd>
      </div>
      {% if this.tags %}
      <div class="post-info-row">
        <dt>Topics</dt>
        <dd class="post-tags">
          {{ tag_links(this.tags) }}
        </dd>
      </div>
      {% endif %}
      {% if this.published_urls %}
      <div class="post-info-row">
        <dt>Published online</dt>
        <dd>
          <ul class="publication-links">
            {% for published_url in this.published_urls %}
            <li>
              <a href="{{ published_url }}" title="{{ published_url }}" aria-label="Open published article at {{ published_url }}">
                {% if published_url|length > 40 %}{{ published_url[:25] }}…{{ published_url[-14:] }}{% else %}{{ published_url }}{% endif %}
              </a>
            </li>
            {% endfor %}
          </ul>
        </dd>
      </div>
      {% endif %}
      </dl>
    </aside>
    {{ share_controls(this, 'article') }}
    {{ narration_player(this) }}
  </div>

  <div class="article-entry-body prose">
    {{ this.body }}
    {% if this.external_url %}<p><a class="button-link" href="{{ this.external_url }}">Visit project →</a></p>{% endif %}
  </div>
</article>
{% else %}
<article>
  <header class="hero compact entry-hero">
    <div class="shell narrow">
      <p class="eyebrow">{{ this.kicker }} — {{ this.date|dateformat('YYYY.MM.dd') }}</p>
      <h1>{{ this.title }}</h1>
      <p class="dek">{{ this.summary }}</p>
    </div>
  </header>
  <section class="content-section">
    <div class="shell prose">
      {{ this.body }}
      {% if this.external_url %}<p><a class="button-link" href="{{ this.external_url }}">Visit project →</a></p>{% endif %}
      {{ share_controls(this, 'page') }}
    </div>
  </section>
</article>
{% endif %}
{% endblock %}