{% extends "./master.njk" %}

{% block content %}
<div id="app" class="w-full">
    {% include "./components/navbar.njk" %}
    <div class="container relative mx-auto py-24 flex flex-col justify-center items-center gap-8">
        <div class="flex flex-col gap-12 max-w-[60%] w-full">
            <!-- Page Header -->
            <div class="w-full flex flex-row justify-start items-center">
                <h2 class="text-4xl font-bold">
                    Your User-Profile
                </h2>
            </div>
            <div class="flex flex-col gap-8 w-full">
                <!-- Section: Personal Data -->
                <div id="profile-data-section" class="flex flex-col flex-auto card p-12"
                    hx-get="/htmx/profile/data/show"
                    hx-trigger="load">
                    <!-- load via HTMX -->
                </div>
                <!-- Section: Multi Factor Authentification -->
                <div id="profile-mfa-section" class="flex flex-col flex-auto card p-12"
                    hx-get="/htmx/profile/mfa/show"
                    hx-trigger="load">
                    <!-- load via HTMX -->
                </div>
                <!-- / -->
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.js"></script>
{% endblock %}