{% extends "partials/_base.html" %}

{# Page title: #}
{% block title %}{{ article.title|lower }} ｜ {{ SITENAME|lower }}{% endblock %}

{# Page metadata: #}
{% block meta %}
<meta name="description" content="{{ article.summary|striptags }}" />
<link rel="canonical" href="{{ SITEURL }}/{{ article.url }}" />
{% endblock %}

{# OpenGraph metadata: #}
{% block opengraph %}
<meta property="og:type" content="article" />
<meta property="og:url" content="{{ SITEURL }}/{{ article.url }}" />
<meta property="og:title" content="{{ article.title|lower }} ｜ {{ SITENAME|lower }}" />
<meta property="og:image" content="" />
<meta property="og:description" content="{{ article.summary|striptags }}" />
{% endblock %}

{# Page styles: #}
{% block styles %}
{% assets output="css/lightbulb.%(version)s.css", "css/lightbulb.css" %}
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ ASSET_URL }}" />
{% endassets %}
{% endblock %}


{# Page content: #}
{% block content %}
<h1>{{ article.title }}</h1>
<div class="article-meta">
  Posted on {{ article.locale_date }}
  ⏽
  {{ "{:,}".format(article.statistics.wc) }} Words
  ⏽
  {{ article.statistics.read_mins }} Minutes
</div>

<article role="article">
{% if article.series %}
<div class="article-series">
  <p>This article is part {{ article.series.index }} of the <span class="series-name">{{ article.series.name }}</span> series:</p>
  <ol>
  {% for part_article in article.series.all %}
    <li>
      {% if part_article == article %}
      <span>{{ part_article.title }}</span>
      {% else %}
      <a href="{{ SITEURL }}/{{ part_article.url }}">{{ part_article.title }}</a>
      {% endif %}
    </li>
  {% endfor %}
  </ol>
</div>
{% endif %}

{{ article.content }}
</article>

{% if article.prev_article or article.next_article %}
<div class="neighbours">
  <div>
  {% if article.prev_article %}
    <a href="{{ SITEURL }}/{{ article.prev_article.url}}">
      <span>❮</span>
      {{ article.prev_article.title }}
    </a>
  {% endif %}
  </div>
  <div class="spacer hidden md:block"></div>
  <div>
  {% if article.next_article %}
    <a href="{{ SITEURL }}/{{ article.next_article.url}}">
      {{ article.next_article.title }}
      <span>❯</span>
    </a>
  {% endif %}
  </div>
</div>
{% endif %}
{% endblock %}