{% import "macros/prose.html" as macros %}
{% extends "_base.html" %}

{% block page %}prose-page{% endblock page %}
{% block lang -%}
{%- if section.extra.lang %}{{section.extra.lang}}{% else %}{{section.lang}}{% endif -%}
{%- endblock lang %}
{% block title %}{{ section.title }}{% endblock title %}
{% block desc %}
  {% if section.description %}
    {% set desc = section.description %}
  {% else %}
    {% set desc = config.description %}
  {% endif %}
  <meta name="description" content="{{ desc }}">
{% endblock desc %}

{% block head %}
{% if config.markdown.highlight_theme == "css" %}
<link id="hl" rel="stylesheet" type="text/css" href="/hl-{% if config.extra.force_theme == "dark" %}dark{% else %}light{% endif %}.css" />
{% endif %}
{% if section.extra.math %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/copy-tex.min.js" integrity="sha384-HORx6nWi8j5/mYA+y57/9/CZc5z8HnEw4WUZWy5yOn9ToKBv1l58vJaufFAn9Zzi" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        renderMathInElement(document.body, {
            delimiters: [
                { left: '$$', right: '$$', display: true },
                { left: '$', right: '$', display: false },
                { left: '\\(', right: '\\)', display: false },
                { left: '\\[', right: '\\]', display: true }
            ],
            throwOnError: false
        });
    });
</script>
{% endif %}
{% endblock head %}

{% block content %}
<div id="wrapper">
  <main>
    {{ macros::back_link(path = get_url(path="/")) }}
    {% include "_section_title.html" %}
    <div>
      {% if section.extra.copy %}
      {% set copy_icon = load_data(path="icon/copy.svg") %}
      {% set check_icon = load_data(path="icon/check.svg") %}
      <div id="copy-cfg" style="display: none;" data-copy-icon="{{ copy_icon }}" data-check-icon="{{ check_icon }}"></div>
      {% endif %}
      <article class="prose">
        {{ section.content | safe }}
      </article>

      {% if section.extra.reaction is defined %}{% set show_reaction = section.extra.reaction %}{% else %}{% set show_reaction = config.extra.reaction %}{% endif %}
      {% if show_reaction %}
      <div class="reaction {{ config.extra.reaction_align }}" data-endpoint="{{ config.extra.reaction_endpoint }}"></div>
      {% endif %}

      {% if section.extra.comment %}
      <div class="giscus"></div>
      {% include "_giscus_script.html" %}
      {% endif %}
    </div>

    {% include "_footer.html" %}
  </main>
</div>
{% endblock content %}

{% block script %}
<script src="/js/lightense.min.js"></script>
{% if section.extra.mermaid %}
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>
{% endif %}
{% endblock script %}