{%- extends 'nbconvert/templates/greenwood_template/index.html.j2' -%}

{%- block html_head_css -%}
{{ super() }}
<style>
  /* unhide the icon */
  #kernel-status-icon {
    display: unset;
  }

  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url("{{ resources.include_url("static/icons_font.ttf") }}") format('truetype');
  }

  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
  }

  /* Workaround for the Select/Dropdown widgets to be visible: */
  select {
    display: block;
  }

  /* Workaround for the RadioButtons widgets to be visible: */
  [type="radio"]:not(:checked), [type="radio"]:checked {
    position: static;
    opacity: 1;
    pointer-events: auto;
  }
</style>

{%- endblock html_head_css -%}


{% block footer_js %}
  {{ super() }}
  <script type="text/javascript">
    requirejs(['static/voila'], function(voila) {
      (async function() {
        var kernel = await voila.connectKernel();

        kernel.statusChanged.connect(() => {
          // console.log(kernel.status);
          var el = document.getElementById("kernel-status-icon");

          if (kernel.status == 'busy') {
            el.innerHTML = 'radio_button_checked';
          } else {
            el.innerHTML = 'radio_button_unchecked';
          }
        });
      })();
    });
  </script>
{% endblock footer_js %}

