{% 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 %}
    {%- if manifest %}
    <link rel="manifest" href="{{ manifest_url }}">
    {% endif -%}
{% endblock %}

{% block postamble %}

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

    <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, --panel-on-primary-color))" }};
	  --sidebar-width: {{ sidebar_width }}px;
      }
      #header {
	  background-color: var(--header-background);
	  color: var(--header-color);
      }
      .mdc-drawer {
	  width: var(--sidebar-width) !important;
      }
      .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content {
	  margin-left: var(--sidebar-width) !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" 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>
  </div>

  <script type="text/javascript">
    {% 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;
    });

    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 %}
  {% if browser_info %}
  {{ embed(roots.browser_info) }}
  {% endif %}
</div>
{% endblock %}
