{% load i18n %}
{% load authentik_user_settings %}
{% load authentik_utils %}

<div class="pf-c-page">
    <main role="main" class="pf-c-page__main" tabindex="-1">
        <section class="pf-c-page__main-section pf-m-light">
            <div class="pf-c-content">
                <h1>
                    <i class="pf-icon pf-icon-user"></i>
                    {% trans 'User Settings' %}
                </h1>
                <p>{% trans "Configure settings relevant to your user profile." %}</p>
            </div>
        </section>
        <ak-tabs vertical="true" style="height: 100%;">
            <section slot="page-1" data-tab-title="{% trans 'User details' %}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                <div class="pf-u-display-flex pf-u-justify-content-center">
                    <div class="pf-u-w-75">
                        <ak-site-shell url="{% url 'authentik_core:user-details' %}">
                            <div slot="body"></div>
                        </ak-site-shell>
                    </div>
                </div>
            </section>
            <section slot="page-2" data-tab-title="{% trans 'Tokens' %}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                <ak-token-user-list></ak-token-user-list>
            </section>
            {% user_stages as user_stages_loc %}
            {% for stage, stage_link in user_stages_loc.items %}
            <section slot="page-{{ stage.pk }}" data-tab-title="{{ stage|verbose_name }}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                <div class="pf-u-display-flex pf-u-justify-content-center">
                    <div class="pf-u-w-75">
                        <ak-site-shell url="{{ stage_link }}">
                            <div slot="body"></div>
                        </ak-site-shell>
                    </div>
                </div>
            </section>
            {% endfor %}
            {% user_sources as user_sources_loc %}
            {% for source, source_link in user_sources_loc.items %}
            <section slot="page-{{ source.pk }}" data-tab-title="{{ source.name }}" class="pf-c-page__main-section pf-m-no-padding-mobile">
                <div class="pf-u-display-flex pf-u-justify-content-center">
                    <div class="pf-u-w-75">
                        <ak-site-shell url="{{ source_link }}">
                            <div slot="body"></div>
                        </ak-site-shell>
                    </div>
                </div>
            </section>
            {% endfor %}
        </ak-tabs>
    </main>
</div>
