{% extends "page.html" %}

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

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

  {% if frontend == "voila" %}
    {{ resources.include_js("static/voila-style.js") }}
  {% endif %}
  <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>

  <div id="voila-tree-main" {{mainStyle | safe}}>
    <div class="list-header">
        <div class="list-header-text">
            Select items to open with {{ "Voilà" if frontend == "voila" else frontend.capitalize() }}.
        </div>
    </div>

    <ul class="voila-notebooks">
      {% if breadcrumbs|length > 1: %}
        <li><a href="{{ breadcrumbs[-2][0] }}?{{ query }}"><i class="fa fa-folder"></i>..</a></li>
      {% endif %}

      {% for content in contents.content %}
        {% if content.type in ['notebook', 'file'] %}
          <li><a href="{{ base_url }}{{ frontend }}/render/{{ content.path }}?{{ query }}" {{openInNewTab}}><i class="fa fa-book"></i>{{content.name}}</a></li>
        {% endif %}
        {% if content.type == 'directory' %}
          <li><a href="{{ base_url }}{{ frontend }}/tree/{{ content.path }}?{{ query }}"><i class="fa fa-folder"></i>{{content.name}}</a></li>
        {% endif %}
      {% endfor %}
    </ul>
{% endblock %}
