<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    {% if title %}
        <title>{{title}}</title>
    {% else %}
        <title>App</title>
    {% endif %}

    {% block header_css %}
        <!-- Bootstrap CSS -->
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/bootstrap.min.css')}}">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap/bootstrap-datepicker.css')}}">

        <!-- Font Awesome CSS Notes -->
        <!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> -->
        <!-- https://use.fontawesome.com/releases/v5.7.0/webfonts/fa-regular-400.woff2 -->
        <!-- https://use.fontawesome.com/releases/v5.7.0/webfonts/ -->

        <!-- Site Font Awesome CSS -->
        <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome/font-awesome-all-v5.7.css')}}">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome/font-awesome-min-v4.7.0.css')}}">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome/font-awesome-woff2.css')}}">

        <!-- Site CSS -->
        <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css')}}">
        {% block header_css_additional %}
        {% endblock header_css_additional %}
    {% endblock %}


    {% block header_scripts %}
        {% block header_scripts_additional %}
        {% endblock header_scripts_additional %}
    {% endblock %}
</head>
<body>
    <img id="bg" src="{{ url_for('static', filename='imgs/backgrounds/background.jpg')}}" alt="{{title}} Background Logo" />

{% block body_header %}
    {% include "body-header.html" %}

    {% block body_header_additional %}
    {% endblock body_header_additional%}
{% endblock %}

<!-- System flashed messages! -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        <div class=flashes>
            {% for category, message in messages %}
                <li class="alert alert-{{ category }}">{{ message }}</li>
            {% endfor %}
        </div>
    {% endif %}
{% endwith %}

{% block body_content %}
    {% block body_content_additional %}
    {% endblock body_content_additional%}
{% endblock %}


{% block body_footer %}
    {% include "body-footer.html" %}

    {% block body_footer_additional %}
    {% endblock body_footer_additional%}
{% endblock %}


{% block body_scripts %}
<!-- For Bootstrap in this exact order... -->
    <script src="{{ url_for('static', filename='js/bootstrap/jquery-3.3.1.slim.min.js')}}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap/popper.min.js')}}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap/bootstrap.min.js')}}"></script>

    <!-- For DatePicker -->
    <script src="{{ url_for('static', filename='js/bootstrap/moment.min.js')}}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap/bootstrap-datepicker.min.js')}}"></script>
    {% block body_scripts_additional %}
    {% endblock body_scripts_additional%}
{% endblock %}

</body>
</html>