{% extends "base.jinja.html" %}

{% block head_css %}
  {{ super() }}
{% endblock head_css %}

{% block head_scripts %}
  <script src="{{ view_object.render_static_url('stimulus_umd.min.js') }}"></script>
  <script>
    Stimulus.application = Stimulus.Application.start();
  </script>

  {%- if not view_object.standalone -%}
  <script src="{{ view_object.render_static_url('viewtype_menu.js') }}"></script>
  {%- endif -%}

  <script src="{{ view_object.render_static_url('resizable_bar.js') }}"></script>
  <script src="{{ view_object.render_static_url('collapsible_toc.js') }}"></script>
  <script src="{{ view_object.render_static_url('toc_highlighting.js') }}"></script>

  <script src="{{ view_object.render_static_url('controllers/anchor_controller.js') }}"></script>
  <script src="{{ view_object.render_static_url('controllers/copy_stable_link_button_controller.js') }}"></script>
  <script src="{{ view_object.render_static_url('controllers/copy_to_clipboard_controller.js') }}"></script>

  {% if not view_object.is_running_on_server and not view_object.standalone %}
    {% include "_shared/static_search_head.jinja" %}
  {% endif %}

  {%- if view_object.is_running_on_server and not view_object.standalone -%}
  <script type="module">
    import hotwiredTurbo from "{{ view_object.render_static_url('turbo.min.js') }}";
  </script>

  <script type="module" src="{{ view_object.render_static_url('controllers/autocompletable_field_controller.js') }}"></script>

  {% if not view_object.has_included_document() %}
  <script src="{{ view_object.render_static_url('controllers/draggable_list_controller.js') }}"></script>
  {% endif %}
  <script src="{{ view_object.render_static_url('controllers/dropdown_menu_controller.js') }}"></script>
  <script src="{{ view_object.render_static_url('controllers/editable_field_controller.js') }}"></script>
  <script src="{{ view_object.render_static_url('controllers/deletable_field_controller.js') }}"></script>
  <script src="{{ view_object.render_static_url('controllers/movable_field_controller.js') }}"></script>
  <script src="{{ view_object.render_static_url('controllers/modal_controller.js') }}"></script>
  <script src="{{ view_object.render_static_url('controllers/scroll_into_view_controller.js') }}"></script>
  <script src="{{ view_object.render_static_url('controllers/tabs_controller.js') }}"></script>
  {%- endif -%}

  {%- if view_object.project_config.is_activated_mathjax() -%}
  <script>
  // configure mathjax to show equation numbers
  window.MathJax = {
    tex: {
      tags: 'ams',
    },   
  };
  </script>
  <script id="MathJax-script" async src="{{ view_object.render_static_url('mathjax/tex-mml-chtml.js') }}"></script>
  {%- if view_object.is_running_on_server -%}
  <script>
    // edits can break equation numbering, requiring a full MathJax re-typeset().
    // To allow MathJax to reparse, the server stores the original math in an extra
    // 'original-math' attribute on each affected div/span. This function then restores
    // the original DOM state, for reprocessing.
    function restoreOriginalMathElements(root = document)
    {
      // Select all div or span elements with class 'math' and an 'original-math' attribute
      const mathElements = root.querySelectorAll('div.math[original-math], span.math[original-math]');

      mathElements.forEach(el => {
        const original = el.getAttribute('original-math');
        if (original !== null) {
            // Restore the original content
            el.innerHTML = original;
        }
      });
    }

    // This EventListener will hook to node updates and re-typeset the MathJax expressions (i.e. after saving)...
    document.addEventListener("turbo:before-stream-render", (event) => {
      if (window.MathJax?.typesetPromise) {
        requestAnimationFrame(() => {
          restoreOriginalMathElements();                 // restore all math divs and spans in the DOM
          MathJax.texReset();                            // reset all previous tex input state (eq numbering...) 
          MathJax.typesetClear();                        // remove all previous output state (typesetting, elements...)
          MathJax.typesetPromise().catch(console.error); // typeset again, this re-creates the equation numbers
        });
      }
    });  
  </script>
  {%- endif -%}
  {%- endif -%}
  {%- if view_object.project_config.is_activated_rapidoc() -%}
  <script src="{{ view_object.render_static_url('rapidoc/rapidoc-min.js') }}"></script>
  {%- endif -%}
  {%- if view_object.project_config.is_activated_mermaid() -%}
    <script src="{{ view_object.render_static_url('mermaid/mermaid.min.js') }}"></script>
    <script type="module">
      mermaid.initialize({ startOnLoad: true });
    </script>
  {%- endif -%}
  {{ super() }}
{% endblock head_scripts %}
{% block title %}{{ view_object.document.title }} - {{ view_object.get_page_title() }}{% endblock title %}
{% block viewtype %}{{ "document" if not view_object.standalone else "standalone_document" }}{% endblock viewtype %}

{% block layout_nav %}
  {%- if not view_object.standalone -%}
  {% include "_shared/nav.jinja.html" %}
  {%- endif -%}
{% endblock layout_nav %}

{% block tree_content %}
  {% include "screens/document/_shared/resizable_bar_with_project_tree.jinja" %}
{% endblock tree_content %}

{% block toc_content %}
  {% include "screens/document/_shared/resizable_bar_with_toc.jinja" %}
{% endblock toc_content %}

{%- if not view_object.standalone -%}
  {%- set header_items = [
        "screens/document/_shared/frame_header_document_title.jinja",
        "screens/document/_shared/viewtype_menu.jinja"
      ]
  -%}
{%- else -%}
  {%- set header_items = [
        "screens/document/_shared/frame_header_document_title.jinja",
      ]
  -%}
{%- endif -%}

{% block header_content %}
  {%- with
      header__items=header_items,
      header__last="screens/document/document/actions.jinja"
  -%}
    {% include "components/header/index.jinja" %}
  {%- endwith -%}
{% endblock header_content %}

{% block main_content %}
  {% include "screens/document/document/main.jinja" %}
{% endblock main_content %}
