{% extends "pages/base.html" %}
{% load i18n static %}
{% 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 %}">
    <div class="markdown-body" id="reader-content">
      {{ content|safe }}
      {% if has_remaining_sections %}
        <div
          id="reader-remaining-loader"
          class="reader-remaining-loader my-4"
          hx-get="{{ fragment_url }}"
          hx-trigger="load"
          hx-swap="outerHTML"
        >
          <div class="d-flex align-items-center gap-2 text-muted">
            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
            <span>{% trans "Loading remaining sections…" %}</span>
          </div>
          <noscript>
            <a class="btn btn-outline-primary btn-sm mt-3" href="{{ full_document_url }}">
              {% trans "Load full document" %}
            </a>
          </noscript>
        </div>
      {% endif %}
    </div>
  </div>
</div>
{% if has_remaining_sections %}
<script src="{% static 'htmx/htmx.min.js' %}" defer></script>
{% endif %}
<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>
{% endblock %}

{% block extra_scripts %}
  <script src="{% static 'docs/js/qrcode.min.js' %}"></script>
  {% include "includes/reader_qr_script.html" %}
{% endblock %}