{% 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 }}</div>

<article role="article">
{{ 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 %}