{% extends "wagtailadmin/generic/form.html" %}
{% load wagtailimages_tags wagtailadmin_tags %}
{% load i18n %}

{% block main_content %}
    <div class="w-tabs" data-tabs>
        <div class="w-tabs__wrapper">
            <div role="tablist" class="w-tabs__list">
                {% trans "Account" as account_text %}
                {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='account' title=account_text %}
                {% trans "Roles" as roles_text %}
                {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='roles' title=roles_text %}
            </div>
        </div>

        <form action="{% url 'wagtailusers_users:edit' user.pk %}" method="POST" novalidate{% if form.is_multipart %} enctype="multipart/form-data"{% endif %}>
            <div class="tab-content">
                {% csrf_token %}

                <section
                    id="tab-account"
                    class="w-tabs__panel"
                    role="tabpanel"
                    hidden
                    aria-labelledby="tab-label-account"
                >
                    <ul class="fields">
                        {% block fields %}
                            {% if form.separate_username_field %}
                                <li>{% formattedfield form.username_field %}</li>
                            {% endif %}
                            <li>{% formattedfield form.email %}</li>
                            <li>{% formattedfield form.first_name %}</li>
                            <li>{% formattedfield form.last_name %}</li>
                            {% block extra_fields %}{% endblock extra_fields %}
                            {% if form.password1 %}
                                <li>{% formattedfield form.password1 %}</li>
                            {% endif %}
                            {% if form.password2 %}
                                <li>{% formattedfield form.password2 %}</li>
                            {% endif %}
                            {% if form.is_active %}
                                <li>{% formattedfield form.is_active %}</li>
                            {% endif %}

                        {% endblock fields %}
                        <li>
                            <input type="submit" value="{% trans 'Save' %}" class="button"/>
                            {% if can_delete %}
                                <a href="{% url 'wagtailusers_users:delete' user.pk %}" class="button no">{% trans "Delete user" %}</a>
                            {% endif %}
                        </li>
                    </ul>
                </section>
                <section
                    id="tab-roles"
                    class="w-tabs__panel"
                    role="tabpanel"
                    hidden
                    aria-labelledby="tab-label-roles"
                >
                    <ul class="fields">
                        {% if form.is_superuser %}
                            <li>{% formattedfield form.is_superuser %}</li>
                        {% endif %}

                        <li>{% formattedfield form.groups %}</li>
                        <li>
                            <input type="submit" value="{% trans 'Save' %}" class="button"/>
                            {% if can_delete %}
                                <a href="{% url 'wagtailusers_users:delete' user.pk %}" class="button no">{% trans "Delete user" %}</a>
                            {% endif %}
                        </li>
                    </ul>
                </section>
            </div>
        </form>
    </div>
{% endblock %}
