<!doctype html>
<html lang="en" style="width:100%; height:100%; margin:0;">
  <head>

    <!-- Manifest JSON-->
    <link rel="manifest" href="{{ url_for('main.static', filename='manifest.json') }}">
    <!-- End Manifest JSON -->

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-113171051-2"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-113171051-2', { 'optimize_id': 'GTM-NP39F2Q'});
    </script>


    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta http-equiv="language" content="en">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#ed8936">

    <!-- Meta Desctiption for Search -->
    <meta name="description" content="► Offline for everyone or just for me? Easily check the status of websites with ServerMonitor! ✅">
    <meta name="title" content="Is the website online? - ServerMonitor"/>
    <meta property="og:description" content="► Offline for everyone or just for me? Easily check the status of websites with ServerMonitor! ✅"/>
    <meta property="og:title" content="Is the website online? - ServerMonitor"/>
    <meta name="twitter:description" content="► Offline for everyone or just for me? Easily check the status of websites with ServerMonitor! ✅">
    <meta name="twitter:title" content="Is the website online? - ServerMonitor"/>


    <link rel="shortcut icon" href="/static/img/favicon.ico">
    <link rel="stylesheet" href="/static/css/main.css">


    <!-- Bootstrap CSS -->
    <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">-->


    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">



    <title>{% block title %}{% endblock %}</title>
  </head>
  <body class="bg-white">
    <div id="container mx-auto">
        <nav class="flex items-center justify-between flex-wrap bg-white p-4 sticky top-0">
          <a href="{{url_for('main.index')}}">
            <div class="flex items-center flex-shrink-0 text-gray-900 mr-6">
                <img src="/static/img/icon.svg" width="30" height="30" class="fill-current h-8 w-8 mr-2" alt="">
              <span class="font-bold text-xl tracking-tight text-gray-700">ServerMonitor <span class="font-thin text-orange-700">BETA</span></span>
            </div>
          </a>
            <div class="block lg:hidden">
              <button class="flex items-center px-3 py-2 border rounded text-gray-900 border-gray-900 hover:text-gray hover:border-gray" onclick="toggle()">
                <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
              </button>
            </div>
            <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto hidden" id="menu">
              <div class="text-sm lg:flex-grow">
                <!--<a href="" class="font-medium block mt-4 lg:inline-block lg:mt-0 text-gray-800 hover:text-gray-600 mr-4">
                  Info
                </a>-->
                <a href="{{ url_for('main.blog') }}" class="font-medium block mt-4 lg:inline-block lg:mt-0 text-gray-800 hover:text-gray-600">
                  Blog
                </a>
              </div>
              <div>
                {% if current_user.is_authenticated %}
                <div class="relative sm:block">
                  <button onclick="openMenu()" class="block h-8 w-8 rounded-full overflow-hidden border-2 border-gray-300 focus:outline-none focus:border-orange-500">
                    <img class="h-full w-full object-cover" src="{{ url_for('static', filename='profile_pictures/' + current_user.image_file) }}" alt="Profile image">
                  </button>
                    <div id="menuDiv" style="display: none" class="absolute right-0 mt-2 w-48 bg-gray-200 text-gray-800 shadow-md rounded-lg py-2">
                      <a href="{{ url_for('users.account') }}" class="block px-4 py-1 hover:bg-orange-200">Account</a>
                      <a href="{{ url_for('users.my_websites') }}" class="block px-4 py-1 hover:bg-orange-200">Websites</a>
                      <a href="{{ url_for('users.logout') }}" class="block px-4 py-1 hover:bg-orange-200">Log Out</a>
                    </div>
                </div> 
                {% else %}
                <a class="inline-block text-sm px-4 py-2 leading-none border rounded text-gray-800 border-gray-800 hover:border-transparent hover:text-white hover:bg-gray-600 mt-4 lg:mt-0" href="{{ url_for('users.login') }}">Log In</a>
                <a class="inline-block text-sm px-4 py-2 leading-none border rounded text-white bg-orange-500 border-orange-500 hover:border-transparent hover:text-orange-500 hover:border-orange-500 hover:bg-white mt-4 lg:mt-0" href="{{ url_for('users.signup') }}">Sign Up</a>
                {% endif %}
              </div>
            </div>
          </nav>
          {% block content%}{% endblock %}
      <footer class="bg-gray-300 bottom-0">
        <div class="footer-copyright text-center py-10 text-gray-900 font-semibold">Made with ❤ in Germany
          <p>Powered by InspiredProgrammer</p>
          <a href="mailto:chris@inspiredprogrammer.com">chris@inspiredprogrammer.com</a>
          <p>© 2019</p>
        </div>
      </footer>
    </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <!--<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>-->
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


  <!-- Google Analytics -->
  <script async src="https://www.google-analytics.com/analytics.js"></script>

  <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
  
  ga('create', 'UA-113171051-2', 'auto');
  ga('send', 'pageview');
  </script>
  <!-- End Google Analytics -->

  <script src="{{ url_for('main.static', filename='app.js') }}"></script>

  <script>
    const menu = document.getElementById('menu');
    const toggle = () => menu.classList.toggle("hidden");
  </script>

  <script>
    function openMenu(){
      var menu = document.getElementById("menuDiv");
      if (menu.style.display === "none"){
        menu.style.display = "block";
      } else {
        menu.style.display = "none";
      }
    }
  </script>

</body>
</html>
