<!DOCTYPE html>

<html lang="en">

<head>

    <!--Title of the page (located in the tab header) -->
    <title>{% block tabtitle %}{% endblock %}</title>

    <!-- Everthing commonly used in the header is stored in this template -->
    {% include "core/header.html" %}

    <!-- Some pages may require extra lines in the header such as loading extra libraries -->
    {% block extraheader %}{% endblock %}

</head>

<body>

    <!-- The navigation bar is the same for every webpage, and it is stored in this template -->
    {% include "core/navbar.html" %}

    <!-- This is the main portion of the webpage, which I put in a single padded row. The sidebar is always present, and the remainder of the page varies. -->
    <div class="container-fluid bg-light">
        <div class="row">
            {% include "core/sidebar.html" %}

            <div class="col-10 overflow-auto h-100">
                {% block body %}{% endblock %}
            </div>
        </div>
    </div>

    <!-- Many packages for JS libraries should be loaded last -->
    {% include "core/footer.html" %}

    <!-- Sometimes I need to load extra javascript at the bottom of the page -->
    {% block extrafooter %}{% endblock %}


</body>

</html>