{% from 'navbar.html' import navigation_bar with context %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{#        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">#}
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="apple-mobile-web-app-title" content="enerPI">
        <meta name="application-name" content="enerPI">
        <link rel="apple-touch-startup-image" href="{{ url_for('static', filename='img/icons/iTunesArtwork@2x.svg') }}">
        <title>enerPI Web</title>
        <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='img/icons/apple-touch-icon.png')}}">
        <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/icons/favicon-32x32.png')}}">
        <link rel="icon" type="image/png" href="{{ url_for('static', filename='img/icons/favicon-16x16.png')}}">
        <link rel="manifest" href="{{ url_for('static', filename='img/icons/manifest.json')}}">
        <link rel="mask-icon" href="{{ url_for('static', filename='img/icons/safari-pinned-tab.svg')}}" color="#5bbad5">
        <link rel="shortcut icon" href="{{ url_for('static', filename='img/icons/favicon.ico')}}">
        <meta name="apple-mobile-web-app-title" content="enerPi">
        <meta name="application-name" content="enerPi">
        <meta name="msapplication-config" content="{{ url_for('static', filename='img/icons/browserconfig.xml')}}">
        <meta name="theme-color" content="#0cbb43">
        <meta name="author" content="Eugenio Panadero" />
        <meta name="description" content="enerPI WebServer for energy usage monitoring" />
		<meta name="keywords" content="current meter, home automation, raspberry pi, rasp.io analog, energy monitor" />
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        {% block styles %}
        {% endblock %}
    </head>
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <ul class=flashes>
            {% for message in messages %}
                <li>{{ message }}</li>
            {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}
    <body>
        <header>
        {% block header %}
            {{ navigation_bar() }}
        {% endblock %}
        </header>
        {% block content %}
        {% endblock %}
        <!-- jQuery first, then Tether, then Bootstrap JS. -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
        <script type="text/javascript">
            var a=document.getElementsByTagName("a");
            for(var i=0;i<a.length;i++)
            {
               a[i].onclick=function() {
                   window.location=this.getAttribute("href");
                   return false;
               }
            }
        </script>
        <script type="text/javascript">
            function switch_padding_navbar_standalone_mode() {
                var user_ag = "{{ request.user_agent }}";
                var is_ipad = user_ag.indexOf('iPad') > -1;
                if (window.navigator.standalone) {
                    if ((window.orientation == 0) || is_ipad) {
                        $("#mynavbar").css({"padding-top": "15px", "max-height": "47px"});
                        $("#navbar-logo").css({"margin-top": "2px", "margin-right": "-10px !important;"});
                        $("body").css({"padding-top": "-15px"});
                    }
                    else {
                        $("#mynavbar").css({"padding-top": "0", "max-height": "32px"});
                        $("#navbar-logo").css({"margin-top": "1px"});
                        $("body").css({"padding-top": "0"});
                    }
                }
            }
            switch_padding_navbar_standalone_mode();
            $(window).on("orientationchange",function(){
                switch_padding_navbar_standalone_mode();
            });
        </script>
    {% block scripts %}
    {% endblock %}
    </body>
</html>
