{% extends "page.html" %}

{% block title %}{{ page_title }}{% endblock %}

{% block stylesheets %}
  {{ super() }}

  <style>
    body {
      background-color: var(--jp-layout-color0);
    }

    .list-header {
      width: 80%;
      margin-top: 50px;
      margin-left: auto;
      margin-right: auto;
      padding: 0px;
      border-style: solid;
      border-width: var(--jp-border-width);
      border-color: var(--jp-border-color2);
      border-bottom: none;
      background-color: var(--jp-layout-color2)
    }

    .list-header-text {
      color: var(--jp-ui-font-color0);
      font-size: var(--jp-ui-font-size1);
      padding: 10px
    }

    .voila-notebooks {
      background-color: var(--jp-layout-color1);
      width: 80%;
      margin: auto;
      padding: 0px;
      border-style: solid;
      border-width: var(--jp-border-width);
      border-color: var(--jp-border-color0);
      border-radius: var(--jp-border-radius);
    }

    .voila-notebooks > li {
      color: var(--jp-ui-font-color1);
      list-style: none;
      border-bottom-style: solid;
      border-bottom-width: var(--jp-border-width);
      border-bottom-color: var(--jp-border-color0);
    }

    .voila-notebooks > li:hover {
      background-color: var(--jp-layout-color2);
    }

    .voila-notebooks > li:last-child {
      border: none
    }

    .voila-notebooks > li > a {
      display: block;
      width: 100%;
      height: 100%;
      padding: 10px;
    }

    .voila-notebooks > li > a > i {
      padding: 0 10px
    }
  </style>
{% endblock %}

{% block body %}

  {% set openInNewTab = 'target=_blank' %}
  <script id="jupyter-config-data" type="application/json">
    {{ page_config | tojson }}
  </script>

    <script src="{{ page_config['fullStaticUrl'] | e }}/treepage.js"></script>
      {% set mainStyle = 'style="display: None;"' %}

  <div id="voila-tree-main" {{mainStyle | safe}}>

{% endblock %}
