<!doctype html>
<html lang="en">
<head>
    {% block head %}
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    {% block styles %}
    <!-- Bootstrap CSS -->
    {{ bootstrap.load_css() }}

    <!-- default footer CSS -->
    <style>
        html, body {
            height: 100%;
        }

        body {
            display: flex;
            flex-flow: column;
        }

        .footer {
            margin-top: auto;
            padding-top: 1em;
            background-color: #f5f5f5;
        }
    </style>
    {% endblock %}

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://kit.fontawesome.com/4c86883252.js" crossorigin="anonymous"></script>
    <title>{% block title %}{% endblock %}</title>
    {% endblock %}
</head>
<body>
<!-- Your page content -->
{% block content %}{% endblock %}

<footer class="footer">
    <p class="small text-center text-muted">
        Developed with ❤️ by the <a href="https://gyorilab.github.io">Gyori Lab</a>.<br/>
        Point of contact: <a href="https://github.com/cthoyt">@cthoyt</a>.
        (<a href="https://github.com/biomappings/semra">Source code</a>)
    </p>
</footer>

{% block scripts %}{% endblock %}
</body>
</html>
