{% extends "pages/base.html" %}
{% load i18n static docs_mermaid docs_model_docs %}
{% block title %}{{ title }}{% endblock %}
{% block extra_head %}
  {% if canonical_url %}
    <link rel="canonical" href="{{ canonical_url }}">
  {% endif %}
{% 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="reader-qr-card mt-4">
        <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>
  {% endif %}
  <div class="{% if toc %}col-12 col-lg-9 order-1 order-lg-2{% else %}col-12{% endif %}">
    {% include "pages/includes/funding_banner.html" with funding_banner=funding_banner funding_banner_classes="funding-banner--sidebar mb-4" only %}
    <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 %}
      {% if request.user.is_staff %}
        {% linked_admin_model_links current_document_path as linked_model_admin_links %}
        {% if linked_model_admin_links %}
          <hr>
          <h4>{% trans "Configure linked models" %}</h4>
          <ul>
            {% for model_link in linked_model_admin_links %}
              <li><a href="{{ model_link.url }}">{% blocktrans with label=model_link.label %}Configure model {{ label }} in the admin console{% endblocktrans %}</a></li>
            {% endfor %}
          </ul>
        {% endif %}
      {% 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 funding_banner %}{% endblock %}

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