{% extends "pages/base.html" %}
{% load i18n %}
{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="row">
  {% if toc %}
  <div class="col-12 col-lg-3 mt-4 mt-lg-0 order-2 order-lg-1">
    <div class="reader-sidebar">
      <nav class="toc">
        <h4>{% trans "Contents" %}</h4>
        {{ toc|safe }}
      </nav>
      <div class="card bg-body-tertiary border-0 shadow-sm mt-4 reader-qr-card">
        <div class="card-body">
          <div
            id="reader-qr"
            class="reader-qr-image"
            data-url="{{ page_url }}"
            role="img"
            aria-label="{% trans 'QR code linking to this page' %}"
          ></div>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
  <div class="{% if toc %}col-12 col-lg-9 order-1 order-lg-2{% else %}col-12{% endif %}">
    <article class="developer-article">
      <header class="mb-4">
        <p class="text-uppercase text-muted fw-semibold small mb-2">{% trans "Developer Article" %}</p>
        <h1 class="display-5 fw-bold mb-3">{{ article.title }}</h1>
        {% if summary %}
        <p class="lead text-secondary">{{ summary }}</p>
        {% endif %}
        <dl class="row text-muted small g-0">
          <dt class="col-sm-4 col-md-3">{% trans "Published" %}</dt>
          <dd class="col-sm-8 col-md-9">{{ article.created_on|date:"DATE_FORMAT" }} &bull; {{ article.created_on|time:"TIME_FORMAT" }}</dd>
          <dt class="col-sm-4 col-md-3">{% trans "Last updated" %}</dt>
          <dd class="col-sm-8 col-md-9">{{ article.updated_on|date:"DATE_FORMAT" }} &bull; {{ article.updated_on|time:"TIME_FORMAT" }}</dd>
        </dl>
      </header>
      <div class="markdown-body">
        {{ content|safe }}
      </div>
    </article>
  </div>
</div>
{% include "includes/reader_qr_script.html" %}
{% endblock %}