{% extends base %}

<!-- goes in body -->
{% block preamble %}
{% if app_favicon %}<link rel="icon" href="{{ app_favicon }}" type="{{favicon_type}}">{% endif %}
{% if manifest %}<link rel="manifest" href="{{ manifest }}">{% endif %}
{% if meta_name %}<meta name="name" content="{{ meta_name }}">{% endif %}
{% if meta_description %}<meta name="description" content="{{ meta_description }}">{% endif %}
{% if meta_keywords %}<meta name="keywords" content="{{ meta_keywords }}">{% endif %}
{% if meta_author %}<meta name="author" content="{{ meta_author }}">{% endif %}
{% if meta_refresh %}<meta http-equiv="refresh" content="{{ meta_refresh }}">{% endif %}
{% if meta_viewport %}<meta name="viewport" content="{{ meta_viewport }}">{% endif %}
{% if base_url and base_target %}<base href="{{ base_url }}" target="{{ base_target }}">{% endif %}
{% endblock %}

{% block postamble %}
<!-- Template CSS -->
{% for css in template_resources['css'].values() %}
<link rel="stylesheet" href="{{ css }}">
{% endfor %}
{% for src in template_resources['extra_css'] %}
<link rel="stylesheet"  href="{{ src }}">
{% endfor %}
{% for raw_css in template_resources['raw_css'] %}
<style type="text/css">
{{ raw_css }}
</style>
{% endfor %}

<!-- Template JS -->
{% for src in template_resources['js'].values() %}
<script src="{{ src }}"></script>
{% endfor %}
{% for src in template_resources['js_modules'].values() %}
<script src="{{ src }}" type="module"></script>
{% endfor %}
{% endblock %}

<!-- goes in body -->
{% block contents %}
<header class="app-bar" id="header" style="{% if header_background %}background-color: {{ header_background }} !important;{% endif %}{% if header_color %}color: {{ header_color }} !important;{% endif %}">
  <div style="display: contents;">
    <div class="app-header">
      {% if app_logo %}<a href="{{ site_url }}"><img src="{{ app_logo }}" class="app-logo"></a>{% endif %}
      {% if site_title %}<a class="title" href="{{ site_url }}" >{{ site_title }}</a>{% endif %}
      {% if site_title and app_title%}<span class="title">-</span>{% endif %}
      {% if app_title %}<a class="title" href="">{{ app_title }}</a>{% endif %}
    </div>
	<section class="header-contents">
	  {% for doc in docs %}
      {% for root in doc.roots %}
      {% if "header" in root.tags %}
      {{ embed(root) }}
      {% endif %}
      {% endfor %}
      {% endfor %}
    </section>
	{% if busy %}
	<div class="pn-busy-container">
	  {{ embed(roots.busy_indicator) | indent(6) }}
	</div>
	{% endif %}
  </div>
</header>

<div class="main-area header-adjust" id="main">
  <main class="main-content" id="main-content"></main>
  <div id="pn-Modal" class="pn-modal header-adjust">
	<div class="pn-modal-content">
	  <span class="pn-modalclose" id="pn-closeModal">&times;</span>
	  {% for doc in docs %}
	  {% for root in doc.roots %}
	  {% if "modal" in root.tags %}
	  {{ embed(root) | indent(6) }}
	  {% endif %}
	  {% endfor %}
	  {% endfor %}
	</div>
  </div>
</div>

<script>
  var config = {
    content: [
      {
        type: 'row',
        content: [
	  {% if nav %}
          {
            type: 'component',
            componentName: 'view',
            componentState: {
              title: "Sidebar",
              model: '<div class="sidebar-contents">{% for doc in docs %}{% for root in doc.roots %}{% if "nav" in root.tags %} {{ embed(root) }} {% endif %}{% endfor %}{% endfor %}</div>'
            },
            width: {{ sidebar_width }},
            isClosable: false
          },
	  {% endif %}
          {
            type: 'stack',
            width: {% if nav %}100-{{ sidebar_width }}{% else %}100{% endif %},
            content: [
              {% for doc in docs %}
              {% for root in doc.roots %}
              {% if "main" in root.tags %}
              {
                type: 'component',
                componentName: 'view',
                componentState: {
                  model: '{{ embed(root) }}',
                  title: "{{ root_labels[root.name] }}"
                },
              },
              {% endif %}
              {% endfor %}
              {% endfor %}
            ]
          }
        ]
      }
    ],
    settings: {
      showPopoutIcon: false
    }
  };

  var myLayout = new GoldenLayout(config, $('#main-content'));
  var resizing = false;
  var resize_dispatcher = () => {
    resizing = true;
    window.dispatchEvent(new Event("resize"))
    resizing = false;
  }
  myLayout.registerComponent('view', function( container, componentState ) {
    const {width, css_classes} = componentState
    if (width) {
      container.on('open', () => container.setSize(width, container.height))
    }
    if (css_classes) {
      css_classes.map((item) => container.getElement().addClass(item))
    }
    container.setTitle(componentState.title)
    container.getElement().html(componentState.model);
    container.on("resize", resize_dispatcher)
  })

  // Absolute hackery to get GoldenLayout to initialize even though
  // document is not ready. Without this bokeh will complain that
  // DOM nodes to render roots into are not initialized in time.
  Object.defineProperty(document, 'readyState', {
    get() { return readyState },
    set(value) { return readyState = value },
  });
  document.readyState = 'complete'

  myLayout.init()
  window.addEventListener('resize', (event) => {
    if (!resizing) {
      myLayout.updateSize($('#main-content').width(), $('#main-content').height())
    }
  });

  var modal = document.getElementById("pn-Modal");
  var span = document.getElementById("pn-closeModal");

  span.onclick = function() {
    modal.style.display = "none";
  }

  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>

{{ embed(roots.js_area) }}
{{ embed(roots.actions) }}
{{ embed(roots.location) }}
{% if notifications %}
{{ embed(roots.notifications) }}
{% endif %}

{% endblock %}