{% import '/macros/nav.jinja' as nav %}
{# ===== HTML ===== #}
<!DOCTYPE html>
<html lang="en" dir="ltr">
{# ===== Head ===== #}
<head>
    <meta 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">
    <title>BaStA</title>
    <meta name="author" content="Michael Götz"/>
    <script src="{{ static('libs/jquery/jquery-3.2.1.min.js') }}"></script>
    <script src="{{ static('libs/bootstrap-4.0.0-beta-dist/js/bootstrap.js') }}"></script>
    {% block js_extra %}{% endblock %}
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{{ static('libs/font-awesome-4.7.0/css/font-awesome.css') }}">
    <link rel="stylesheet" href="{{ static('libs/bootstrap-4.0.0-beta-dist/css/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ static('css/nav.css') }}">
    {% block css_extra %}{% endblock %}
    <!-- Piwik -->
    <script type="text/javascript">
        var _paq = _paq || [];
        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        (function () {
            var u = "//mg-server.ddns.net/piwik/";
            _paq.push(['setTrackerUrl', u + 'piwik.php']);
            _paq.push(['setSiteId', '1']);
            var d = document, g = d.createElement('script'), s = d.getElementsByTagName('script')[0];
            g.type = 'text/javascript';
            g.async = true;
            g.defer = true;
            g.src = u + 'piwik.js';
            s.parentNode.insertBefore(g, s);
        })();
    </script>
    <!-- End Piwik Code -->
</head>

{# ===== Body ===== #}
<body>

{% block body %}
    <div class="container-fluid">
        <div class="row">
            <div class="col-2 text-center m-auto">
                {% if request.user.is_authenticated() %}
                    <div class="dropdown">
                        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="fa fa-user" aria-hidden="true"></i>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                            <a class="dropdown-item" href="{{ url('account') }}"><i class="fa fa-user"
                                                                                    aria-hidden="true"></i> Profile</a>
                            <a class="dropdown-item" href="{{ url('logout') }}"><i class="fa fa-sign-out"
                                                                                   aria-hidden="true"></i> Logout</a>
                        </div>
                    </div>
                {% else %}
                    <a href="{{ url('login') }}"><i class="fa fa-sign-in" aria-hidden="true"></i></a>
                {% endif %}
            </div>
            <div class="col-8 pt-2">
                {% block headline %}{% endblock %}</div>
            <div class="col-2 text-center m-auto">
                <div id="menu-button"><i class="fa fa-bars" aria-hidden="true"></i>
                    {{ nav.main_nav() }}
                </div>
            </div>
        </div>
        <div class="row">{% block bottom_nav %}{% endblock %}</div>
        <div class="test row bg-dark text-white">
            {% block content %}{% endblock %}
        </div>

        {% block test %}
            <div class="row text-center bg-warning pb-2 pl-3 pr-3" style="font-size: 12px !important;">
                <div class="col-12 text-center">
                    Hinweis: Diese Seite dient <strong>nur</strong> zu Testzwecken.
                    Wir garantieren weder die Vollständigkeit, noch
                    die Korrektheit der dargestellten Daten.
                </div>
            </div>
        {% endblock %}
        {% block footer %}
            <footer>
                <div class="row bg-dark text-white">
                    <div class="col-6">
                        <p class="text-right mb-0"><a href="{{ url('impressum') }}#bug-report">Bug Report</a></p>
                    </div>
                    <div class="col-6">
                        <p class="text-left mb-0"><a href="{{ url('impressum') }}">Impressum</a></p>
                    </div>
                </div>
                <div class="row text-center bg-dark text-white pb-2">
                    <div class="col">
                        © Copyright 2017, Michael Götz
                    </div>
                </div>
            </footer>

        {% endblock %}
    </div>
{% endblock %}
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"
        integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"
        integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1"
        crossorigin="anonymous"></script>
{% block js_tail %}{% endblock %}
</body>
</html>