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

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

{% 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 %}
{% if style.font_url %}
<link rel="stylesheet" type="text/css" href="{{ style.font_url }}" />
{% endif %}

<style>
  :root {
    --background-color: {{ style.background_color }};
    --body-font: {{ style.font }};
    --corner-radius: {{ style.corner_radius }};
    --header-background: {{ style.header_background }};
    --header-color: {{ style.header_color }};
    --sidebar-width: {{ sidebar_width }}px;
  }
  body {
    color: {{ style.color }};
    background-color: var(--background-color);
    font-family: var(--body-font);
  }
  #header a {
    color: currentColor;
  }
  #header-design-provider {
    --neutral-fill-hover: var(--header-background);
    --neutral-fill-rest: var(--header-background);
    --neutral-foreground-rest: var(--header-color);
    background: var(--header-background);
    color: var(--header-color);
  }
  #sidebar {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
  }
</style>

<!-- Fast Script -->
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', (event) => {
  const header_design = new window.fastDesignProvider("#header-design-provider");
  const body_design = new window.fastDesignProvider("#body-design-provider");
  body_design.setAccentColor("{{ style.accent_base_color }}")
  body_design.setLuminance({{ style.luminance }});
  body_design.setNeutralColor("{{ style.neutral_color }}");
  header_design.setAccentColor("{{ style.header_accent_base_color }}");
  header_design.setNeutralColor("{{ style.header_neutral_color }}");
});
</script>
{% endblock %}

<!-- goes in body -->
{% block contents %}
<fast-design-system-provider id="body-design-provider" use-defaults>
  <div id="container">
    <fast-design-system-provider id="header-design-provider">
      <nav id="header" {{ 'class="shadow"' if style.shadow else '' }} >
	{% if nav or sidebar_footer %}
	<span onclick="{{ 'openNav()' if collapsed_sidebar else 'closeNav()' }}" id="sidebar-button">
	  <div class="pn-bar"></div>
	  <div class="pn-bar"></div>
	  <div class="pn-bar"></div>
	</span>
	<fast-tooltip anchor="sidebar-button" position="right">
	  Toggle the Sidebar
	</fast-tooltip>
	{% endif %}
	<div class="app-header">
	  {% if app_logo %}
	  <a class="navbar-brand app-logo" 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="" >{{ app_title }}</a>
	  {% endif %}
	</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 saveLayout %}
        <fast-button id="layout-reset" appearance="neutral" style="height:24px">
          <svg style="height: 10px;width: 10px" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"/></svg>
        </fast-button>
        <fast-tooltip anchor="layout-reset" position="bottom">
          Reset the layout
        </fast-tooltip>
        {% endif %}
	{% if theme_toggle %}
	<div class="pn-toggle-theme">
	  <fast-switch id="theme-switch" style="float: right;" onChange="toggleLightDarkTheme('{{ theme }}')" {% if theme=='default' %}checked{% endif %}>
	    <span slot="checked-message">
              <svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z"/></svg>
	    </span>
	    <span slot="unchecked-message">
              <svg class="theme-toggle-icon" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"><path d="M0 0h24v24H0z" fill="none"/><path d="M10 2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/></svg>
	    </span>
	  </fast-switch>
	  <fast-tooltip anchor="theme-switch" position="bottom">
	    Toggle the Theme
	  </fast-tooltip>
	</div>
	{% endif %}
	{% if busy %}
	<div class="pn-busy-container" id="busy-container">
	  {{ embed(roots.busy_indicator) | indent(6) }}
	</div>
	<fast-tooltip anchor="busy-container" position="left">
	  Busy Indicator
	</fast-tooltip>
	{% endif %}
      </nav>
    </fast-design-system-provider>

    <div class="row" id="content">
      {% if nav or sidebar_footer %}
      <div class="sidenav {{'hidden' if collapsed_sidebar else ''}}" id="sidebar">
	<ul class="nav flex-column">
	  {% if nav %}
	  {% for doc in docs %}
	  {% for root in doc.roots %}
	  {% if "nav" in root.tags %}
          {{ embed(root) | indent(8) }}
	  {% endif %}
	  {% endfor %}
	  {% endfor %}
	  {% endif %}
	  {% if sidebar_footer %}
	  {{ sidebar_footer }}
	  {% endif %}
	</ul>
      </div>
      {% endif %}
      <div class="main" id="main">
	{% if main_max_width %}
	<div class="main-margin" style="max-width: {{ main_max_width }};">
	{% endif %}
	  <div id="responsive-grid"></div>
	{% if main_max_width %}
	</div>
	{% endif %}
      </div>
      <fast-dialog id="pn-Modal" hidden>
        <fast-button class="pn-modalclose" id="pn-closeModal">&times;</fast-button>
	<div>
          {% for doc in docs %}
          {% for root in doc.roots %}
          {% if "modal" in root.tags %}
          {{ embed(root) | indent(10) }}
          {% endif %}
          {% endfor %}
          {% endfor %}
        </div>
      </fast-dialog>
    </div>
  </div>
</fast-design-system-provider>

<script type="text/javascript">
  {{ js }}
</script>

<script type="text/javascript">
  function openNav() {
    document.getElementById("sidebar").classList.remove("hidden");
    document.getElementById("sidebar-button").onclick = closeNav;
  }

  function closeNav() {
    document.getElementById("sidebar").classList.add("hidden");
    document.getElementById("sidebar-button").onclick = openNav;
  }

  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>

<script type="text/babel">
  const ResponsiveGridLayout = ReactGridLayout.WidthProvider(ReactGridLayout.Responsive);
  {% if saveLayout %}
  const originalLayout = getFromLS("layouts") || {{ layouts }};
  {% else %}
  const originalLayout = {{ layouts }};
  {% endif %}

  function resize_layout(obj, old_, new_, p, e, element) {
    window.dispatchEvent(new Event("resize"))
  }

  function resize_layout_stop(obj, old_, new_, p, e, element) {
    setTimeout(function(){
      window.dispatchEvent(new Event("resize"))
    }, 50);
  }

  function getFromLS(key) {
    let ls = {};
    if (window.localStorage) {
      try {
        ls = JSON.parse(window.localStorage.getItem(window.location.origin + window.location.pathname)) || {};
      } catch (e) {
        /*Ignore*/
      }
    }
    return ls[key];
  }

  function saveToLS(key, value) {
    if (window.localStorage) {
      window.localStorage.setItem(
        window.location.origin + window.location.pathname,
        JSON.stringify({
          [key]: value
        })
      );
    }
  }

  class ResponsiveGrid extends React.PureComponent {

    static defaultProps = {
      onLayoutChange: function() {}
    }

    constructor(props) {
      super(props);
      this.state = {
	layouts: JSON.parse(JSON.stringify(originalLayout))
      };
      {% if saveLayout %}
      this.resetLayout = this.resetLayout.bind(this)
      document.getElementById('layout-reset').onclick = this.resetLayout
      {% endif %}
      this.mounted = false;
    }

    resetLayout() {
      this.setState({
        layouts: {{ layouts }}
      });
    }

    onLayoutChange(layout, layouts) {
      saveToLS("layouts", layouts);
      this.setState({ layouts });
    }

    componentDidMount() {
    }

    render() {
      return (
        <ResponsiveGridLayout
           className={"layout"}
           cols={ {{cols}} }
           breakpoints={ {{breakpoints}} }
	   onResize={resize_layout}
           onResizeStop={resize_layout_stop}
           draggableHandle={".drag-handle"}
           draggableCancel={".bk-root"}
           rowHeight={ {{rowHeight}} }
           layouts={this.state.layouts}
           {% if compact == "both" %}
           compactType={"horizontal"}
           {% elif compact == "horizontal" %}
           verticalCompact={false}
           compactType={"horizontal"}
           {% elif compact is none %}
           verticalCompact={false}
           {% endif %}
           preventCollision={ {{preventCollision and 'true' or 'false'}} }
           {% if saveLayout %}
           onLayoutChange={(layout, layouts) => this.onLayoutChange(layout, layouts)}
           {% endif %}
         >
          {% set count = [] %}
          {% for doc in docs %}{% for root in doc.roots %}{% if "main" in root.tags %}
            <div className="card-margin" key="{{count|length + 1 }}" style={% raw %}{{borderRadius: '5px'}}{% endraw %}>
              {% if main_layout %}
              <fast-card class="pn-wrapper">
	      {% else %}
              <div class="pn-wrapper">
	      {% endif %}
                <span className="drag-handle"></span>
                <span className="fullscreen-button">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
                    <path d="M4.5 11H3v4h4v-1.5H4.5V11zM3 7h1.5V4.5H7V3H3v4zm10.5 6.5H11V15h4v-4h-1.5v2.5zM11 3v1.5h2.5V7H15V3h-4z"/>
                  </svg>
                </span>
                {{ embed(root) | indent(4) | replace("class", "className") | replace('style="display: contents;"', 'style={{display: "contents"}}') }}
             {% if main_layout %}
             </fast-card>
	     {% else %}
             </div>
	     {% endif %}
            </div>
          {% set __ = count.append(1) %}
          {% endif %}{% endfor %}{% endfor %}
        </ResponsiveGridLayout>
      );
    }
  }
  ReactDOM.render(<ResponsiveGrid />, document.getElementById('responsive-grid'));
  addFullScreenToggle()
</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 %}

{% endblock %}