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

{%- block html_head_js -%}
{%- block html_head_js_logs -%}
{{ log.js() }}
{%- endblock html_head_js_logs -%}
{%- endblock html_head_js -%}

{%- block html_head_css -%}
<link rel="stylesheet" href="https://unpkg.com/font-awesome@4.5.0/css/font-awesome.min.css" type="text/css" />
{{ super() }}
{{ spinner.css() }}
  <style>
    /*Hide empty cells*/
    .jp-mod-noOutputs.jp-mod-noInput {
      display: none;
    }
  </style>
{%- endblock html_head_css -%}

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

{%- block body_header -%}
{% if resources.theme == 'dark' %}
<body class="jp-Notebook theme-dark" data-base-url="{{resources.base_url}}voila/">
{% else %}
<body class="jp-Notebook theme-light" data-base-url="{{resources.base_url}}voila/">
{% endif %}
{{ spinner.html() }}
<script>
var voila_process = function(cell_index, cell_count) {
  var el = document.getElementById("loading_text")
  el.innerHTML = `Executing ${cell_index} of ${cell_count}`
}
var voila_heartbeat = function() {
  console.log('Ok, voila is still executing...')
}
</script>
<div id="rendered_cells" style="display: none">
{%- endblock body_header -%}

{%- block body_loop -%}
  {# from this point on, the kernel is started #}
  {%- with kernel_id = kernel_start(nb) -%}
    <script id="jupyter-config-data" type="application/json">
    {
        "baseUrl": "{{resources.base_url}}",
        "kernelId": "{{kernel_id}}"
    }
    </script>
    {% set cell_count = nb.cells|length %}
    {#
    Voilà is using Jinja's Template.generate method to not render the whole template in one go.
    The current implementation of Jinja will however not yield template snippets if we call a blocks' super()
    Therefore it is important to have the cell loop in the template.
    The issue for Jinja is: https://github.com/pallets/jinja/issues/1044
    #}
    {%- for cell in cell_generator(nb, kernel_id) -%}
      {% set cellloop = loop %}
      {%- block any_cell scoped -%}
      <script>
        voila_process({{ cellloop.index }}, {{ cell_count }})
      </script>
        {{ super() }}
      {%- endblock any_cell -%}
    {%- endfor -%}
  {% endwith %}
{%- endblock body_loop -%}

{%- block body_footer -%}
</div>
<script type="text/javascript">
  (function() {
    // remove the loading element
    var el = document.getElementById("loading")
    el.parentNode.removeChild(el)
    // show the cell output
    el = document.getElementById("rendered_cells")
    el.style.display = 'unset'
  })();
</script>
{{ super() }}
{%- endblock body_footer -%}

{% block footer_js %}
{{ voila_setup(resources.base_url, resources.nbextensions) }}
{% endblock footer_js %}
