<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="manifest.json">
    <link rel="shortcut icon" href="favicon.ico">
    <title><%= htmlWebpackPlugin.options.PAGE_TITLE %></title>
    <% if (htmlWebpackPlugin.options.IS_PROD) { %>
      <!-- Global site tag (gtag.js) - Google Analytics -->
      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133429788-6"></script>
      <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-133429788-6', { 'anonymize_ip': true });
      </script>
    <% } %>
    <script type="text/javascript" src="/env-config.js"></script>
    <% if (!htmlWebpackPlugin.options.IS_LIVE) { %>
      <meta name="viewport" content="width=device-width">
      <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
      <style>
        body {
          background: #000 !important;
          color: #fff !important;
          min-height: 100vh !important;
          margin: 0 !important;
          padding: 0 !important;
          padding-top: 20vh !important;
          box-sizing: border-box;
          font-family: 'Inter', sans-serif !important;
        }
        header {
          width: 100%;
          background: #261EE4;
        }
        .info-flexbox {
          display: flex;
          width: 80%;
          max-width: 800px;
          margin: 0 auto;
          align-items: flex-end;
          padding: 20px;
        }
        h2 {
          font-weight: normal !important;
          margin-bottom: 20px;
        }
        .blog-link {
          margin-left: auto;
          color: #000 !important;
          background: #6C6CFF;
          padding: 10px 20px;
          font-size: 16px;
          text-decoration: none;
          transition: background-color 0.2s;
        }
        .blog-link:hover {
          background: #fff;
        }
        .box-content {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-top: 20px;
        }
        .logo-alexandria {
          width: 30%;
          flex-shrink: 0;
          margin-right: 30px;
        }
        @media screen and (max-width: 800px) {
          h2 {
            font-size: 20px !important;
          }
        }
        @media screen and (max-width: 500px) {
          body {
            padding: 50px 0 !important;
          }
          .info-flexbox {
            flex-wrap: wrap;
          }
          .info-flexbox > * {
            width: 100% !important;
          }
        }
      </style>
    <% } %>
  </head>
  <body>
    <% if (htmlWebpackPlugin.options.IS_LIVE) { %>
      <noscript>
        You need to enable JavaScript to run this app.
      </noscript>
      <div id="root"></div>
      <div id="tooltips"></div>
      <script>
        if (window.self !== window.top) {
          window.top.location.href = window.location.href;
        }
      </script>
    <% } else { %>
      <header>
        <div class="info-flexbox">
          <img src="./Logo_Alexandrial.svg" class="logo-alexandria">
          <div class="box-content">
            <h2>
              Our new testnet - Alexandria will be launched
              around&nbsp;09:00&nbsp;UTC on&nbsp;Monday the&nbsp;21st
              of&nbsp;September&nbsp;2020.
            </h2>
            <a href="https://blog.joystream.org/announcing-alexandria/" target="_blank" class="blog-link">Find out more</a>
          </div>
        </div>
      </header>
    <% } %>
  </body>
</html>
