{% extends base %}

{% block preamble %}
{% if app_favicon %}<link rel="icon" href="{{ app_favicon }}" type="{{favicon_type}}">{% 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 %}

<style>
  body {
    color: {{ style.color }};
    background-color: {{ style.background_color }};
  }
  :not(:defined) {
    visibility: hidden;
  }
</style>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
<!-- Fast Script -->
<script type="module" src="https://unpkg.com/@microsoft/fast-components@1.11.0"></script>
{% endblock %}
{% block postamble %}
<style>
{{ css_fast }}
</style>
<style>
{{ css_base }}
</style>
<style>
{{ css_theme }}
</style>
{% endblock %}
<!-- goes in body -->
{% block contents %}
<fast-design-system-provider id="body-design-provider" use-defaults
  {% if style.background_color %}background-color="{{ style.background_color }}"{% endif %}
  {% if style.accent_base_color %}accent-base-color="{{ style.accent_base_color }}"{% endif %}
  body-font="Times New Roman"
  >
  <div id="container">
  <fast-design-system-provider id="header-design-provider"
    {% if header_background %}background-color="{{ header_background }}"{% endif %}
    {% if header_color %}color="{{ header_color }}"{% endif %}
  >
  <nav id="header">
    {% if nav %}
    <span onclick="closeNav()" id="sidebar-button">
	  <div class="pn-bar"></div>
	  <div class="pn-bar"></div>
	  <div class="pn-bar"></div>
	</span>
    {% endif %}
    <div class="app-header">
      <div>
      {% if app_logo %}<a class="navbar-brand app-logo" href="/"><img src="{{ app_logo }}" class="app-logo"></a>{% endif %}
      {% if site_title %}<a class="title" href="/" >&nbsp;{{ site_title }}</a>{% endif %}
      {% if site_title and app_title%}<span class="title">&nbsp;-</span>{% endif %}
      {% if app_title %}<a class="title" href="" >{{ app_title }}</a>{% endif %}
      </div>
    </div>
    <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>
  {% if enable_theme_toggle %}
  <div class="pn-toggle-theme">
    <fast-switch style="float: right;" onChange="toggleLightDarkTheme()" {% if theme=='default' %}checked{% endif %}>
    <span slot="checked-message">Light</span>
    <span slot="unchecked-message">Dark</span>
  </fast-switch>
  </div>
  {% endif %}
	{% if busy %}
	<div class="pn-busy-container">
	  {{ embed(roots.busy_indicator) | indent(6) }}
	</div>
	{% endif %}

  </nav>
  </fast-design-system-provider>

  <div class="row" id="content">
    {% if nav %}
    <div class="sidenav" id="sidebar">
      <ul class="nav flex-column">
      {% for doc in docs %}
	    {% for root in doc.roots %}
	    {% if "nav" in root.tags %}
        {{ embed(root) | indent(8) }}
	    {% endif %}
	    {% endfor %}
	    {% endfor %}
      </ul>
    </div>
    {% endif %}

    <div class="main" id="main"
    {% if not nav %}
    style="margin-left: 0px;"
    {% else %}
    style="margin-left: 300px;"
    {% endif %}
    >
      {% 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 %}
      <div class="card-margin"><fast-card>
        {{ embed(root) | indent(4) }}
      </fast-card>
      </div>
      {% endif %}
      {% endfor %}
      {% endfor %}
      {% if main_max_width %}
      </div>
      {% endif %}

	  <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(10) }}
		  {% endif %}
		  {% endfor %}
		  {% endfor %}
		</div>
	  </div>
	  </div>
	</div>
  </div>
</div>
</fast-design-system-provider>
<script>
  {{ js }}
</script>
<script>
  function openNav() {
    document.getElementById("sidebar").style.left = 0;
    document.getElementById("main").style.marginLeft = "300px";
    document.getElementById("sidebar-button").onclick = closeNav;
    var interval = setInterval(function () { window.dispatchEvent(new Event('resize')); }, 10);
    setTimeout(function () { clearInterval(interval) }, 210)
  }

  function closeNav() {
    document.getElementById("sidebar").style.left = "-300px";
    document.getElementById("main").style.marginLeft = 0;
    document.getElementById("sidebar-button").onclick = openNav;
    var interval = setInterval(function () { window.dispatchEvent(new Event('resize')); }, 10);
    setTimeout(function () { clearInterval(interval) }, 210)
  }

  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.location) }}

{% endblock %}
