{% extends "base.html" %}
{% block html_lang %}{{ article.lang }}{% endblock %}

{% block title %}{{ SITENAME }} - {{ article.title }}{% endblock %}

{% block head %}
  {{ super() }}

  {% import 'translations.html' as translations with context %}
  {% if translations.entry_hreflang(article) %}
    {{ translations.entry_hreflang(article) }}
  {% endif %}

  {% if article.description %}
    <meta name="description" content="{{article.description}}" />
  {% endif %}

  {% for tag in article.tags %}
    <meta name="tags" content="{{tag}}" />
  {% endfor %}

  <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/css/article.css" />
{% endblock %}

{% block content %}
<section id="content" class="body">
  <header>
    <h2 class="entry-title">
      <a href="{{ SITEURL }}/{{ article.url }}" rel="bookmark"
         title="Permalink to {{ article.title|striptags }}">{{ article.title }}</a></h2>
 {% import 'translations.html' as translations with context %}
 {{ translations.translations_for(article) }}
  </header>
  <footer class="post-info">
    <time class="published" datetime="{{ article.date.isoformat() }}">
      {{ article.locale_date }}
    </time>
    {% if article.modified %}
    <time class="modified" datetime="{{ article.modified.isoformat() }}">
      {{ article.locale_modified }}
    </time>
    {% endif %}
    {% if article.category %}
    <div class="category">
        Category: <a href="{{ SITEURL }}/{{ article.category.url }}">{{ article.category }}</a>
    </div>
    {% endif %}
    {% if article.tags %}
    <div class="tags">
        Tags:
        {% for tag in article.tags %}
            <a href="{{ SITEURL }}/{{ tag.url }}">{{ tag }}</a>
        {% endfor %}
    </div>
    {% endif %}
  </footer><!-- /.post-info -->
  <div class="entry-content">
    {{ article.content }}
  </div><!-- /.entry-content -->
</section>
{% if article.prev_article and article.next_article %}
  <div class="paginator" style="display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 15px;">
    <a href="{{ SITEURL }}/{{ article.next_article.url }}">&laquo;</a>
    <a href="{{ SITEURL }}/{{ article.prev_article.url }}">&raquo;</a>
  </div>
{% else %}
  {% if article.prev_article %}
    <div class="paginator" style="display: flex; align-items: flex-end; margin-bottom: 15px; flex-direction: row-reverse">
      <a href="{{ SITEURL }}/{{ article.prev_article.url }}">&raquo;</a>
    </div>
  {% endif %}
  {% if article.next_article %}
    <div class="paginator" style="display: flex; align-items: flex-end; margin-bottom: 15px;">
      <a href="{{ SITEURL }}/{{ article.next_article.url }}">&laquo;</a>
    </div>
  {% endif %}
{% endif %}
{% endblock %}