{% extends "base/base.html" %}

{% block custom_css %}
<style>
  :root {
    --header-background: {{ header_background or "var(--design-primary-color, var(--panel-primary-color))" }};
    --header-color: {{ header_color or "var(--design-primary-text-color, var(--panel-on-primary-color))" }};
    --sidebar-width: {{ sidebar_width }}px;
  }
  #header {
    --design-background-text-color: var(--header-color);
    --design-background-color: var(--header-background);
    background-color: var(--header-background);
    color: var(--header-color);
  }
</style>
{% endblock %}

<!-- goes in body -->
{% block contents %}
<header class="app-bar" id="header">
  <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 type="text/javascript">
  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)
  })


  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>

{% block state_roots %}
{{ super() }}
{% endblock %}

{% endblock %}