{% load i18n %}
{% load passbook_user_settings %}

<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>
        <section class="pf-c-page__main-section">
            <div class="pf-u-display-flex pf-u-justify-content-center">
                <div class="pf-u-w-75">
                    <div class="pf-c-card">
                        <div class="pf-c-card__header pf-c-title pf-m-md">
                            {% trans 'Update details' %}
                        </div>
                        <div class="pf-c-card__body">
                            <form action="" method="post" class="pf-c-form pf-m-horizontal">
                                {% include 'partials/form_horizontal.html' with form=form %}
                                {% block beneath_form %}
                                {% endblock %}
                                <div class="pf-c-form__group pf-m-action">
                                    <div class="pf-c-form__horizontal-group">
                                        <div class="pf-c-form__actions">
                                            <input class="pf-c-button pf-m-primary" type="submit" value="{% trans 'Update' %}" />
                                            {% if unenrollment_enabled %}
                                            <a class="pf-c-button pf-m-danger"
                                                href="{% url 'passbook_flows:default-unenrollment' %}?back={{ request.get_full_path }}">{% trans "Delete account" %}</a>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="pf-c-page__main-section">
            <div class="pf-u-display-flex pf-u-justify-content-center">
                <div class="pf-u-w-75">
                    <pb-site-shell url="{% url 'passbook_core:user-tokens' %}">
                        <div slot="body"></div>
                    </pb-site-shell>
                </div>
            </div>
        </section>
        {% user_stages as user_stages_loc %}
        {% for stage in user_stages_loc %}
        <section class="pf-c-page__main-section">
            <div class="pf-u-display-flex pf-u-justify-content-center">
                <div class="pf-u-w-75">
                    <pb-site-shell url="{{ stage }}">
                        <div slot="body"></div>
                    </pb-site-shell>
                </div>
            </div>
        </section>
        {% endfor %}
        {% user_sources as user_sources_loc %}
        {% for source in user_sources_loc %}
        <section class="pf-c-page__main-section">
            <div class="pf-u-display-flex pf-u-justify-content-center">
                <div class="pf-u-w-75">
                    <pb-site-shell url="{{ source }}">
                        <div slot="body"></div>
                    </pb-site-shell>
                </div>
            </div>
        </section>
        {% endfor %}
    </main>
</div>