{%- extends 'nbconvert/templates/classic/index.html.j2' -%}
{% import "log.macro.html.j2" as log %}
{% import "spinner.macro.html.j2" as spinner %}
{% from 'voila_setup.macro.html.j2' import voila_setup_helper_functions, voila_setup with context %}

{%- block html_head_js -%}
{%- block html_head_js_logs -%}
{{ log.js() }}
{%- endblock html_head_js_logs -%}
{%- block html_head_js_jquery -%}
<script src="{{ resources.jquery_url }}"></script>
{%- endblock html_head_js_jquery -%}

{# this overrides the default behaviour of rendering static widgets #}
{% block jupyter_widgets %}
{% endblock jupyter_widgets %}

{% block notebook_execute %}
    {# Copy so we do not modify the page_config with updates. #}
    {% set page_config_full = page_config.copy() %}

    {%- set kernel_id = kernel_start(nb) -%}

    {# Set a dummy variable - we just want the side effect of the update. #}
    {% set _ = page_config_full.update(baseUrl=resources.base_url, kernelId=kernel_id) %}

    <script id="jupyter-config-data" type="application/json">
      {{ page_config_full | tojson }}
    </script>

    {# from this point on, nb.cells contains output of the executed cells #}
    {% do notebook_execute(nb, kernel_id) %}
{%- endblock notebook_execute -%}

{%- endblock html_head_js -%}

{%- block notebook_css -%}
  {{ resources.include_css("static/materialcolors.css") }}
  {{ resources.include_css("static/labvariables.css") }}
  {{ resources.include_js("static/voila-style.js") }}

  {{ spinner.css() }}

  <style>
    /*Hide empty cells*/
    .jp-mod-noOutputs.jp-mod-noInput {
      display: none;
    }
  </style>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.5.0/css/font-awesome.min.css" type="text/css" />

  {{ super() }}
{%- endblock notebook_css -%}

{%- block html_head_js_mathjax -%}
{# remove mathjax CDN #}
{%- endblock html_head_js_mathjax -%}

{% block body_header %}
<body data-base-url="{{resources.base_url}}voila/" data-voila="voila">
  {{ spinner.html() }}
  {{ voila_setup_helper_functions() }}
  <div tabindex="-1" id="notebook" class="border-box-sizing">
    <div class="container" id="notebook-container">
      <div id="rendered_cells" style="display: none">
{% endblock body_header %}

{%- block body_loop -%}
  {%- for cell in nb.cells -%}
    {% set cellloop = loop %}
      {%- block any_cell scoped -%}
        <div cell-index="{{cellloop.index}}">
          {{ super() }}
        </div>
      {%- endblock any_cell -%}
  {%- endfor -%}
{%- endblock body_loop -%}

{%- block body_footer -%}
</div>
<script type="text/javascript">
  window.voila_finish();
</script>
{{ super() }}
{%- endblock body_footer -%}

{% block data_priority scoped %}
{% if output %}
  <script type="application/vnd.voila.cell-output+json">
    {{ output | tojson }}
  </script>
{% endif %}
{% endblock data_priority %}

{%- block footer %}
{% block footer_js %}
{{ voila_setup(resources.base_url, resources.labextensions) }}
{% endblock footer_js %}
</html>
{%- endblock footer-%}
