{% from 'bootstrap5/nav.html' import render_nav_item %}
{% from 'bootstrap5/utils.html' import render_messages %}

<!DOCTYPE html>
<html lang="en">
<head>
        {% block head %}
        {% if title %}
        <title>{{ title }} - WPI ACM</title>
        {% else %}
        <title>WPI Association for Computing Machinery</title>
        {% endif %}
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.ico') }}">

        {% block styles %}
            <!-- Bootstrap CSS -->
            {{ bootstrap.load_css() }}
            <link rel="stylesheet" href="{{ url_for('static',
                                         filename='css/style.css') }}"
        {% endblock %}

        {% endblock %}
    </head>
    <body style="background-color: #0182ac;">
        <div class="container rounded aligh-middle p-1 mt-5" style="background-color: #ffffff; height: 100%;">
        <!-- Your page content -->
        {% block navbar %}{% endblock %}

        <!-- Your page content -->
        <div class="container">
            <div id="outerAlerts">
            {{ render_messages(container=False, dismissible=True, dismiss_animate=True) }}
            </div>

            {% block app_content %}{% endblock %}

        </div>

        {% block scripts %}
            <!-- Optional JavaScript -->
            {{ bootstrap.load_js() }}
        {% endblock %}
        </div>
    </body>
</html>

