<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        {% if app.environment == 'dev' %}D{% endif %}
        {% if title is defined %}{{ title }}{% else %}SNIPS{% endif %}
    </title>
    <link rel="shortcut icon" type="image/jpg" href="/snips.png">

    {% block css %}
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
              integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
              crossorigin="anonymous">
    {% endblock %}
</head>
<body>
{{ include('base/navbar.html.twig') }}

{# alert block #}
<div class="container">
    <br>
    <div class="row">
        <div class="col-sm mx-auto">
            {% block flashes %}
                {% for msg in app.session.flashBag.get('error') %}
                    <div class="alert alert-danger" role="alert">
                        <strong>Error: </strong> {{ msg|raw }}
                    </div>
                {% endfor %}
                {% for msg in app.session.flashBag.get('success') %}
                    <div class="alert alert-success">
                        <strong>Success: </strong> {{ msg|raw }}
                    </div>
                {% endfor %}
            {% endblock %}
        </div>
    </div>
</div>

{# body blocks #}
{% block content %}
{% endblock %}

{# javascript block #}
{% block js %}
    <script src="https://kit.fontawesome.com/3471b6556e.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"
            integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
            crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>