{% from macros import embed %}
<!DOCTYPE html>
<html lang="en" {{ html_attrs | default("", true) }} data-theme-managed="{{ 'true' if is_page else 'false' }}">
  {% block head %}
  <head>
  {% block inner_head %}
    <meta charset="utf-8">
    <title>{% block title %}{{ title | e if title else "Panel App" }}{% endblock %}</title>
    {% if manifest_url %}<link rel="manifest" href="{{ manifest_url }}">{% endif %}
    {%- block preamble %}
    <link rel="apple-touch-icon" href="{% if apple_touch_icon %}{{ apple_touch_icon }}{% else %}{{ dist_url }}images/apple-touch-icon.png{% endif %}">
    <link rel="icon" href="{% if favicon %}{{ favicon }}{% else %}{{ dist_url }}images/favicon.ico{% endif %}">
    {% if meta -%}
    {% 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 -%}
    {% endif -%}
    {%- endblock %}
  {% block resources %}
    <style>
      html, body {
      	display: flow-root;
        box-sizing: border-box;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      {% if theme_name == "dark" %}
      body { background-color: #121212; color: #fff }
      {% endif %}
      {% block loader_css %}
      #loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
      }
      .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid #f3f3f3;
        border-top: 5px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      {% endblock %}
    </style>
    {% if not is_page %}
    <link rel="stylesheet" href="{{ dist_url }}bundled/theme/{{theme_name}}.css">
    {% endif %}
  {% block css_resources -%}
    {{- bokeh_css if bokeh_css }}
  {%-  endblock css_resources %}
  {% block js_resources -%}
    {{ bokeh_js if bokeh_js }}
  {%- endblock js_resources %}
  {%  endblock resources %}
    {% block postamble %}
    {% if resources %}
    {% for css in resources.css.values() %}
    <link rel="stylesheet" href="{{ css }}">
    {% endfor %}

    {%- block custom_css -%}
    {%- endblock -%}

    {%- for raw_css in resources.raw_css %}
    <style type="text/css">
    {{ raw_css }}
    </style>
    {% endfor -%}

    {%- for src in resources.js.values() %}
    <script src="{{ src }}"></script>
    {% endfor -%}
    {%- for src in resources.js_modules.values() %}
    <script src="{{ src }}" type="module"></script>
    {%- endfor %}
    {%- endif  %}
  {%- endblock %}
    <style id="template-styles">
      html, body {
      	color: var(--mui-palette-text-primary);
        background-color: var(--mui-palette-background-default);
	      font: var(--mui-font-body1);
      }
      h1 { font: var(--mui-font-h1) }
      h2 { font: var(--mui-font-h2) }
      h3 { font: var(--mui-font-h3) }
      h4 { font: var(--mui-font-h4) }
      h5 { font: var(--mui-font-h5) }
      h6 { font: var(--mui-font-h6) }
    </style>
  {% endblock inner_head %}
  </head>
  {% endblock head%}
  {% block body %}
  <body>
  {% block inner_body %}
    {% block loader %}
    <div id="loader" style="display: none;">
      <div class="spinner"></div>
    </div>
    {% endblock %}
  {%    block contents %}
  {%      for doc in docs %}
  {{        embed(doc) if doc.elementid }}
  {%-       for root in doc.roots %}
  {%          block root scoped %}
  {{            embed(root) }}
  {%          endblock %}
  {%        endfor %}
  {%      endfor %}
  {%    endblock contents %}
  {{ plot_script | indent(4) }}
  {% block loader_script %}
  <script>
    let timeout = 0;
    function checkIdle() {
      if (Bokeh.index && Bokeh.index.roots[0] && Bokeh.index.roots[0].model.document.is_idle) {
        document.getElementById('loader').style.display = 'none';
      } else {
        timeout += 100;
        if (timeout > 500) {
          document.getElementById('loader').style.display = 'flex';
        }
        setTimeout(checkIdle, 100);
      }
    }
    setTimeout(checkIdle, 100)
  </script>
  {% endblock %}
  {%  endblock inner_body %}
  </body>
  {% endblock body%}
</html>
