<!DOCTYPE html>
<html lang="en">
<head>
    {% load i18n static %}
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Web OpenDroneMap. Open Source Aerial Imagery Processing Platform">
    <meta name="author" content="">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/app/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="/static/app/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/static/app/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/static/app/manifest.json">
    <link rel="mask-icon" href="/static/app/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href="/static/app/favicon.ico">
    <meta name="msapplication-config" content="/static/app/browserconfig.xml">
    <meta name="theme-color" content="#ffffff">
    
    <link rel="stylesheet" type="text/css" href="{% static 'app/css/bootstrap.min.css' %}" />

    <link href="{% static 'app/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
    <link href="{% static 'app/css/metisMenu.min.css' %}" rel="stylesheet">
    <link href="{% static 'app/css/sb-admin-2.css' %}" rel="stylesheet">
    {% block extra-headers %}{% endblock %}
    <link rel="stylesheet" type="text/css" href="{% static 'app/bundles/css/main.css' %}" />
    <script src="{% static 'app/js/vendor/modernizr-2.8.3.min.js' %}"></script>
    <script src="{% static 'app/js/vendor/jquery-1.11.2.min.js' %}"></script>
    {% load render_bundle from webpack_loader %}
    {% render_bundle 'main' %}
    <title>{{title|default:"Login"}} - WebODM</title>
</head>
<body data-admin-utc-offset="{% now "Z" %}">
    <!--[if lt IE 8]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->
    <!--
            {% if request.user.is_authenticated %}
                {% if user.is_superuser %}          
                <li>
                    <a class="page-scroll" href="/admin/">Admin Panel</a>
                </li>
                {% endif %}
                <li>
                    <a class="page-scroll" href="/logout/">Logout</a>
                </li>
            {% else %}
                 <li>
                    <a class="page-scroll" href="/login/">Login</a>
                </li>
            {% endif %}
            </ul>
-->
    <div id="wrapper">
        <nav id="navbar-top" class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                {% block navbar-top-links %}{% endblock %}
                <a class="navbar-brand" href="/"><img src="{% static 'app/img/logo36.png' %}" alt="WebODM" /></a>
                <a class="navbar-link" href="/"><p class="navbar-text">OpenDroneMap</a></p>
            </div>

            {% block navbar-sidebar %}{% endblock %}
        </nav>
        
        {% block page-wrapper %}{% endblock %}
    </div>
</body>
<script src="{% static 'app/js/vendor/metisMenu.min.js' %}"></script>
<script>
$(function(){
    $('#side-menu').metisMenu();

    $(window).bind("load resize", function() {
        let topOffset = 50;
        let width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
        if (width < 768) {
            $('div.navbar-collapse').addClass('collapse');
            topOffset = 100; // 2-row-menu
        } else {
            $('div.navbar-collapse').removeClass('collapse');
        }

        let height = ((this.window.innerHeight > 0) ? this.window.innerHeight : this.screen.height) - 1;
        height = height - topOffset;
        if (height < 1) height = 1;
        if (height > topOffset) {
            $("#page-wrapper").css("min-height", (height) + "px");
        }
    });

    let url = window.location;
    // let element = $('ul.nav a').filter(function() {
    //     return this.href == url;
    // }).addClass('active').parent().parent().addClass('in').parent();
    let element = $('ul.nav a').filter(function() {
     return this.href == url;
    }).addClass('active').parent();

    while(true){
        if (element.is('li')){
            element = element.parent().addClass('in').parent();
        } else {
            break;
        }
    }
});

</script>
<script src="{% static 'app/js/vendor/bootstrap.min.js' %}"></script>
</html>