{# ===== 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>OFU App</title>
    <meta name="author" content="Michael Götz"/>
    {% 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') }}">
    {% block css_extra %}{% endblock %}
</head>

{# ===== Body ===== #}
<body>
{% block body %}
    {% block headline %}{% endblock %}
    <div class="container-fluid bg-dark text-white">
        {% block content %}{% endblock %}
    </div>

    {% block test %}
        <div class="text-center bg-warning pb-2" style="font-size: 12px !important;">
            <p>Hinweis: Diese Seite dient <strong>nur</strong> zu Testzwecken.
                Wir garantieren weder die Vollständigkeit, noch
                die Korrektheit der dargestellten Daten.</p>
        </div>
    {% endblock %}

    {% block bottom_nav %}{% endblock %}
    {% block footer %}
        <footer>
            <div class="container-fluid bg-dark text-white">
                <div class="row pt-2 text-center">
                    <div class="col">
                        <p class="text-right"><a href="{{ url('impressum') }}#bug-report">Bug Report</a></p>
                    </div>
                    <div class="col">
                        <p class="text-left"><a href="{{ url('impressum') }}">Impressum</a></p>
                    </div>
                </div>
                <div class="row text-center">
                    <div class="col">
                        © Copyright 2017, Michael Götz
                        </p>
                    </div>
                </div>
            </div>
        </footer>
    {% endblock %}
{% 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>