
<!DOCTYPE html>
<!--
Copyright 2016 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{% block page_title %}{% endblock %}{{ APP_TITLE }}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

  <meta name="theme-color" content="#366597">

  <link rel="stylesheet" href="/static/dist/styles.css?v={{app_version}}" />

  <link rel="icon" sizes="192x192" href="/static/img/crstatus_192.png">

  <!-- iOS: run in full-screen mode and display upper status bar as translucent -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

  <link rel="apple-touch-icon" href="/static/img/crstatus_128.png">
  <link rel="apple-touch-icon-precomposed" href="/static/img/crstatus_128.png">
  <link rel="shortcut icon" href="/static/img/crstatus_128.png">

  <link rel="preconnect" href="https://www.google-analytics.com" crossorigin>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  {% block meta %}{% if seo %}{% include "seo/_meta.html" %}{% endif %}{% endblock %}

  <link rel="stylesheet" href="/static/css/main.css?v={{app_version}}">

  {% block css %}{% endblock %}

  {# Google Identity Services library for OAuth #}
  <script src="https://accounts.google.com/gsi/client" async defer nonce="{{nonce}}"></script>

  <script nonce="{{nonce}}">
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get("loginStatus") == 'False') {
      alert('Please log in.');
      window.location.replace('/');
    } else {
      if (urlParams.get("error") == '403') {
        alert('You do not have permission to access that page. You may need to sign in with an authorized account.');
      }
      if (urlParams.has("error")) {
        urlParams.delete("error");
        const newSearch = urlParams.toString() ? '?' + urlParams.toString() : '';
        window.history.replaceState({}, document.title, window.location.pathname + newSearch + window.location.hash);
      }
    }
  </script>
  <script type="module" nonce="{{nonce}}">
    import {ChromeStatusClient} from "/static/dist/cs-client.js?v={{app_version}}"
    window.csClient = new ChromeStatusClient(
        '{{xsrf_token}}', {{xsrf_token_expires}});

    {# Attach Eventlistener for the drawer menu. #}
    const drawer = document.querySelector('chromedash-drawer');
    const header = document.querySelector('chromedash-header');
    header.addEventListener('drawer-clicked', (e) => {
      e.preventDefault();
      open = drawer.toggleDrawerActions();
    });
  </script>

  <script type="module" nonce="{{nonce}}" defer
          src="/static/dist/components.js?v={{app_version}}"></script>
  {% block preload %}{% endblock %}

  {% block rss %}{% endblock%}
</head>

<body class="loading {% if not prod %}non-prod{% endif %}" data-path="{{current_path}}">

  <div id="app-content-container">
    <div>
      <div class="main-toolbar">
        <div class="toolbar-content">
          <chromedash-header
            appTitle="{{APP_TITLE}}"
            currentPage="{{current_path}}"
            googleSignInClientId="{{google_sign_in_client_id}}"
            devMode="{{DEV_MODE}}">
          </chromedash-header>
        </div>
      </div>

      <div id="content">
        <div>
          <chromedash-drawer
            currentPage="{{current_path}}"
            googleSignInClientId="{{google_sign_in_client_id}}">
          </chromedash-drawer>
        </div>
        <chromedash-banner
          message="{{banner_message}}"
          timestamp="{{banner_time}}">
        </chromedash-banner>
        <div id="spinner">
          <img src="/static/img/ring.svg">
        </div>
        <div id="content-flex-wrapper">
          <div id="content-component-wrapper">
            {% block subheader %}{% endblock %}
            {% block content %}{% endblock %}
          </div>
        </div>
      </div>

    </div>
    <chromedash-footer></chromedash-footer>
  </div>

  {% block overlay %}{% endblock %}

  {% block js %}{% endblock %}

  <script src="https://www.googletagmanager.com/gtag/js?id=UA-179341418-1"
          async nonce="{{nonce}}"></script>

  {#
  Note that the following script tag must include type="module" so that the form field event listeners
  attached by shared.js will not be attached until after Shoelace event listeners are attached.
  See https://github.com/GoogleChrome/chromium-dashboard/issues/2014
  #}
  <script type="module" nonce="{{nonce}}" src="/static/dist/shared.js?v={{app_version}}"></script>
</body>
</html>
