<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link
      rel="icon"
      href="{{ url_for('static', filename='icons/withBackground.svg') }}"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <!-- Resource hints for performance -->
    <link rel="preconnect" href="https://www.googletagmanager.com" />
    <link rel="preconnect" href="https://cdn.jsdelivr.net" />
    <meta name="description" content="{{ var['description'] }}" />
    <meta property="og:title" content="Andrew Simonson" />
    <meta name="og:description" content="{{ var['description'] }}" />
    <meta property="og:type" content="website" />
    <meta
      property="og:image"
      content="{{ url_for('static', filename='icons/rasterLogoCircle.png') }}"
    />
    <meta property="og:url" content="{{ request.url_root | trim('/') }}{{ var['canonical'] }}" />
    <meta property="twitter:title" content="Andrew Simonson" />
    <meta name="twitter:description" content="{{ var['description'] }}" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta property="og:site_name" content="Andrew Simonson - Portfolio" />
    <meta
      property="twitter:image"
      content="{{ url_for('static', filename='icons/rasterLogoCircle.png') }}"
    />
    <meta name="twitter:image:alt" content="some example picture idk" />
    <meta name="twitter:site" content="@asimonson1125" />

    <!-- Global site tag (gtag.js) - Google Analytics (deferred for performance) -->
    <script
      async
      defer
      src="https://www.googletagmanager.com/gtag/js?id=G-E2V93W9CNV"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());
      gtag("config", "G-E2V93W9CNV");
    </script>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='css/App.css') }}"
    />
    <link rel="canonical" href="{{ request.url_root | trim('/') }}{{ var['canonical'] }}" />
    <script defer src="{{ url_for('static', filename='js/responsive.js') }}"></script>
    {# <script src="{{ url_for('static', filename='js/chessbed.js') }}"></script> #}
    <script defer src="{{ url_for('static', filename='js/idler.js') }}"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
    <title>{{ var['title'] }}</title>
  </head>
  {% block header %}
  <body onpopstate="backButton()">
    <div id="loading-bar"></div>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <main id='map'></main>
    <div id="contentStuffer">
      <div class="header">
        <div id="name-container" onclick="goto('home')">
          <div class="line name">
            <span class="textGrad">{# Andrew Simonoson #}</span>
          </div>
        </div>

        <img
          src="{{ url_for('static', filename='icons/menu.svg')}}"
          alt="menu"
          id="menu"
          onClick="toggleMenu()"
        />
        <div class="navControl">
          <div class="navBar">
            <div onClick="goto('home')" class="navElement">
              <p>Home</p>
            </div>
            <div onclick="goto('status')" class="navElement">
              <p>Status</p>
            </div>
            <div onclick="goto('projects')" class="navElement">
              <p>Work</p>
            </div>
          </div>
        </div>
      </div>
      {% endblock %} {% block content%}
      <div id="root">{% include var['template'] %}</div>
      {% endblock %} {% block footer %}
      <div id="footerSpacer"></div>
      <div class="footer">{% include 'partials/socials.html' %}</div>
      {% endblock %}
    </div>
  </body>
</html>
