<!DOCTYPE html>
<html lang="{block language}{/block}">
  <head>
    <meta charset="utf-8">
    <title>{block title}{/block}</title>
    <base href="{=BASE_URL}" target="_self">
    <meta name="description" content="{block description}{/block}">
    <meta name="MobileOptimized" content="320">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="public/css/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
     {block style}
     .wrapper {
       min-height: calc(100vh - 90px);
     }
     .footer {
       height: 90px;
     }
     {/block}
    </style>
  </head>
  <body>
    <div class="wrapper">
      <header>
	<div class="w3-top">
	  <div class="w3-container w3-white w3-hide-small">
	    <h1>{siteTitle}</h1>
	  </div>
	  <nav class="w3-bar w3-teal w3-card w3-left-align w3-large">
	    <a href="{=BASE_URL}" class="w3-bar-item w3-button w3-hover-white">{_}home{/_}</a>
	    <a href="#" class="w3-bar-item w3-button w3-hover-white w3-hide-small">Link 1</a>
	    <a href="#" class="w3-bar-item w3-button w3-hover-white w3-hide-small">Link 2</a>
	    <a href="#" class="w3-bar-item w3-button w3-hover-white w3-hide-small">Link 3</a>
	    <a href="javascript:void(0);" class="w3-bar-item w3-button w3-hover-white w3-right w3-hide-medium w3-hide-large" onclick="toggleMenu()"><span class="fa fa-bars"></span>
	    </a>
	  </nav>
	  <div id="mobile-menu" class="w3-bar-block w3-teal w3-hide w3-hide-medium w3-hide-large">
	    <a href="#" class="w3-bar-item w3-button w3-hover-white">Link 1</a>
	    <a href="#" class="w3-bar-item w3-button w3-hover-white">Link 2</a>
	    <a href="#" class="w3-bar-item w3-button w3-hover-white">Link 3</a>
	  </div>
	</div>
      </header>
      <br><br><br><br class="w3-hide-small"><br class="w3-hide-small"><br class="w3-hide-small">
      <main class="w3-main">
	{block content}
	{/block}
      </main>
    </div>
    <footer class="footer w3-padding-24 w3-center w3-small w3-dark-gray">
      <p>{_}powered_by{/_} <a href="https://lemoncms.tuxfamily.org/" target="_blank">LemonCMS</a> version {=CMS_VERSION}</p>
    </footer>
    <script>
     // Used to toggle the menu on small screens when clicking on the menu button
     function toggleMenu() {
       var x = document.getElementById("mobile-menu");
       if (x.className.indexOf("w3-show") == -1) {
	 x.className += " w3-show";
       } else { 
	 x.className = x.className.replace(" w3-show", "");
       }
     }
    </script>

  </body>
</html>
