{% extends base %}

{% 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 %}

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">

<style>
.mdc-drawer {
  width: {{ sidebar_width }}px !important;
}
.mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content {
  margin-left: {{ sidebar_width }}px !important;
}
</style>

<!-- 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 %}
<div class="mdc-typography" id="container">
<header class="mdc-top-app-bar app-bar mdc-top-app-bar--fixed" style="{% if header_background %}background-color: {{ header_background }} !important;{% endif %}{% if header_color %}color: {{ header_color }} !important;{% endif %}" id="header">
  <div class="mdc-top-app-bar__row">
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
      {% if nav %}
      <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
      {% endif %}
      <div class="title-bar">
        <span class="mdc-top-app-bar__title 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 }}" >&nbsp;{{ site_title }}</a>{% endif %}
          {% if site_title and app_title%}<span class="title">-</span>{% endif %}
          {% if app_title %}<a class="title" href="" >&nbsp;{{ app_title }}</a>{% endif %}
        </span>
        <div id="header-items">
          {% for doc in docs %}
          {% for root in doc.roots %}
          {% if "header" in root.tags %}
          {{ embed(root) | indent(8) }}
          {% endif %}
          {% endfor %}
          {% endfor %}
        </div>
        </div>
    </section>
    {% if busy %}
	<div class="pn-busy-container">
	  {{ embed(roots.busy_indicator) | indent(6) }}
	</div>
	{% endif %}
  </div>
</header>

{% if nav %}
<aside class="mdc-drawer mdc-top-app-bar--fixed-adjust mdc-drawer--dismissible mdc-drawer--open" id="sidebar">
  <div class="mdc-drawer__content">
    <div class="mdc-list">
	  {% for doc in docs %}
	  {% for root in doc.roots %}
	  {% if "nav" in root.tags %}
      {{ embed(root) | indent(8) }}
	  {% endif %}
	  {% endfor %}
	  {% endfor %}
    </div>
  </div>
</aside>
{% endif %}

<div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust">
<main class="main-content" id="main">
  {% if main_max_width %}
    <div style="margin-left: auto; margin-right: auto;max-width: {{main_max_width}}">
  {% endif %}
  {% for doc in docs %}
  {% for root in doc.roots %}
  {% if "main" in root.tags %}
  {{ embed(root) | indent(4) }}
  {% endif %}
  {% endfor %}
  {% endfor %}
  {% if main_max_width %}
    </div>
  {% endif %}
</main>

<div id="pn-Modal" class="mdc-dialog">
  <div class="mdc-dialog__container">
    <div class="mdc-dialog__surface" role="alertdialog" aria-modal="true">
      <div class="mdc-dialog__content" id="my-dialog-content">
	{% for doc in docs %}
	{% for root in doc.roots %}
	{% if "modal" in root.tags %}
	{{ embed(root) | indent(4) }}
	{% endif %}
	{% endfor %}
	{% endfor %}
      </div>
    </div>
  </div>
</div>

<script>
  {% if nav %}
  var drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
  var topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.getElementById('header'));
  topAppBar.setScrollTarget(document.getElementById('main'));
  topAppBar.listen('MDCTopAppBar:nav', function() {
    drawer.open = !drawer.open;
    // Ensure bokeh layout recomputes layout
    window.dispatchEvent(new Event('resize'));
  });

  drawer.open = true;
  {% endif %}

  var modal_el = document.getElementById("pn-Modal");
  var modal = new mdc.dialog.MDCDialog(modal_el);

  window.onclick = function(event) {
    if (event.target == modal_el) {
      modal.close();
    }
  }
</script>

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

{% endblock %}