{% 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>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 %}">
    {% if edit_url %}
      <div class="d-flex justify-content-end mb-3">
        <a class="btn btn-outline-primary btn-sm" href="{{ edit_url }}">
          {% trans "Edit document" %}
        </a>
      </div>
    {% endif %}
    <div class="markdown-body">
      {{ content|safe }}
    </div>
  </div>
</div>
<script>
  (function () {
    const RELOAD_DELAY = 5 * 60 * 1000;
    let timer;
    const resetTimer = () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        window.location.reload();
      }, RELOAD_DELAY);
    };
    ["click", "mousemove", "keydown", "scroll", "touchstart"].forEach((evt) => {
      document.addEventListener(evt, resetTimer, { passive: true });
    });
    resetTimer();
  })();
</script>
{% include "includes/reader_qr_script.html" %}
{% endblock %}