{% load staticfiles %}

<!DOCTYPE html>

<html lang="en">
    {# block for main header content #}
    {% block mainheader %}
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- get bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

        <!-- 3rd party css and js packages -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/hover.css/2.3.1/css/hover.css" integrity="sha256-JN6PzDiVqV2siZjedqNB10DTVZsdRKY5oW0TTvYpAuQ=" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.css" integrity="sha256-BbA16MRVnPLkcJWY/l5MsqhyOIQr7OpgUAkYkKVvYco=" crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" integrity="sha256-HtCCUh9Hkh//8U1OwcbD8epVEUdBvuI8wj1KtqMhNkI=" crossorigin="anonymous" />

        {# block to set favicon #}
        {% block favicon %}
        {% endblock favicon %}

        {# block for project definied HEAD content #}
        {% block project_head %}
        {% endblock project_head %}

        {# block for locally defined HEAD content #}
        {% block local_head %}{% endblock local_head %}

        {# Global Javascript Functions #}
        <script>
            {# Django CSRF Functions for AJAX Calls #}
            function getCookie(name) {
                var cookieValue = null;
                if (document.cookie && document.cookie !== '') {
                    var cookies = document.cookie.split(';');
                    for (var i = 0; i < cookies.length; i++) {
                        var cookie = jQuery.trim(cookies[i]);
                        if (cookie.substring(0, name.length + 1) === (name + '=')) {
                            cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                            break;
                        }
                    }
                }
                return cookieValue;
            }
            function csrfSafeMethod(method) {
                {# these HTTP methods do not require CSRF protection #}
                return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
            }
            var csrftoken = getCookie('csrftoken');
        </script>

        {# project Javascript Functions #}
        {% block project_javascript %}{% endblock project_javascript %}

        {# Local Javascript Functions #}
        {% block local_javascript %}{% endblock local_javascript %}

    </head>
    {% endblock mainheader %}

    <body class="d-flex flex-column min-vh-100">
        {# block for navigation bar #}
        {% block mainnavbar %}
        {% endblock mainnavbar %}

        <section id='page-container' class="container-fluid flex-grow-1">
            {# block to display django messages #}
            {% block messages %}
                {% include 'handyhelpers/component/show_messages.htm' %}
            {% endblock messages %}

            {# block to contain main page content #}
            {% block content %} Default Content - Local page should overwrite this {% endblock content %}
            {% block modals %} {% endblock modals %}
        </section>

        {% block mainfooter %}
            <footer class="mt-auto mb-4">
                <div class="text-center">
                </div>
            </footer>
        {% endblock mainfooter%}
    </body>
</html>
