<!DOCTYPE html>
<html lang="en" itemscope itemtype="http://schema.org/WebPage">


    {%  include 'head.html' %}

    <body class="presentation-page bg-gray-200">
        {% include 'session_defaults.html' %}

{#        <script>#}
{#            // Hulpfunctie om URLs te genereren met prefix#}
{#            function prefixed_url_for(endpoint) {#}
{#                // Verwijder eventuele dubbele slashes aan het begin#}
{#                if (endpoint.startsWith('//')) {#}
{#                    endpoint = endpoint.substring(1);#}
{#                } else if (endpoint.startsWith('/')) {#}
{#                    endpoint = endpoint;#}
{#                }#}
{##}
{#                // Basis URL van de applicatie (zonder trailing slash)#}
{#                const baseUrl = window.location.origin;#}
{##}
{#                // Combineer basis URL met endpoint#}
{#                return `${baseUrl}${endpoint}`;#}
{#            }#}
{#        </script>#}
        {% include 'navbar.html' %}
        {% include 'header.html' %}
        <hr>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <span>
                        <div class="container mb-4">
                            <div class="row mt-lg-n12 mt-md-n12 mt-n12 justify-content-center">
                                {% block content_class %}<div class="col-xl-8 col-lg-5 col-md-7 mx-auto">{% endblock %}
                                    <div class="card mt-8">
                                        <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                                            <div class="bg-gradient-success shadow-success border-radius-lg py-3 pe-1 text-center py-4">
                                                <h4 class="font-weight-bolder text-white mt-1">
                                                    {% block content_title %}{% endblock %}
                                                </h4>
                                                <p class="mb-1 text-sm text-white">
                                                    {% block content_description %}{% endblock %}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            {% block content %}{% endblock %}
                                        </div>
                                        <div class="card-footer text-center pt-0 px-lg-2 px-1">
                                            <p class="mb-4 text-sm mx-auto">
                                                {% block content_footer %}{% endblock %}
                                            </p>
                                            {% with messages = get_flashed_messages(with_categories=true) %}
                                                {% if messages%}
                                                    {% for category, message in messages%}
                                                        <div class="alert alert-{{category}}" role="alert">
                                                            {{message}}
                                                        </div>
                                                    {%endfor%}
                                                {%endif%}
                                            {%endwith%}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </span>
                </div>
            </div>
        </div>
        <hr>
        {% include 'footer.html' %}
        {% include 'scripts.html' %}
        {% include 'ordered_list_configs.html' %}
        {% block scripts %}{% endblock %}
    </body>
</html>
