{% 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>
          <a class="btn btn-outline-primary btn-sm reader-full-document-link" href="{{ full_document_url }}" hidden>
            {% trans "Load full document" %}
          </a>
          <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 () {
    var fullDocumentLinks = document.querySelectorAll(".reader-full-document-link[hidden]");
    for (var linkIndex = 0; linkIndex < fullDocumentLinks.length; linkIndex += 1) {
      fullDocumentLinks[linkIndex].removeAttribute("hidden");
    }
    var hasControllerFlag = function () {
      var decodeQueryPart = function (value) {
        try {
          return decodeURIComponent(value || "").toLowerCase();
        } catch (error) {
          return "";
        }
      };
      var falseValues = ["0", "false", "off", "no"];
      var parts = window.location.search.replace(/^\?/, "").split("&");
      for (var index = 0; index < parts.length; index += 1) {
        if (!parts[index]) {
          continue;
        }
        var keyValue = parts[index].split("=");
        var key = decodeQueryPart(keyValue[0]);
        var value = decodeQueryPart(keyValue[1]);
        if ((key === "controller" || key === "tv" || key === "ps4") && falseValues.indexOf(value) === -1) {
          return true;
        }
      }
      return false;
    };
    var controllerMode = document.documentElement.classList.contains("controller-mode") ||
      hasControllerFlag();
    var reloadDelay = controllerMode ? 30 * 60 * 1000 : 5 * 60 * 1000;
    var timer;
    var resetTimer = function () {
      clearTimeout(timer);
      timer = setTimeout(function () {
        if (document.body && document.body.classList.contains("user-story-open")) {
          resetTimer();
          return;
        }
        window.location.reload();
      }, reloadDelay);
    };
    ["click", "mousemove", "pointermove", "focusin", "keydown", "scroll", "touchstart"].forEach(function (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 %}