{% extends 'users/base.html' %}

{% block user_content %}
    <div class="i-box-group vert">
        <div class="i-box">
            <div class="i-box-header">
                <div class="i-box-title">
                    {%- trans %}Details{% endtrans -%}
                </div>
                {% if session.user.is_admin %}
                    <div class="i-box-buttons i-box-align-buttons">
                        <ind-user-block-button user-id="{{ user.id }}"
                                               user-is-blocked="{{ user.is_blocked | tojson }}"
                                               user-first-name="{{ user.first_name }}"
                                               user-last-name="{{ user.last_name }}">
                        </ind-user-block-button>
                        {% if allow_deletion %}
                            <ind-user-delete-button user-id="{{ (user.id if user != session.user else none) | tojson }}"
                                                    user-is-admin="{{ user.is_admin | tojson }}"
                                                    user-first-name="{{ user.first_name }}"
                                                    user-last-name="{{ user.last_name }}">
                            </ind-user-delete-button>
                        {% endif %}
                    </div>
                {% endif %}
            </div>
            <div class="i-box-content">
                <div id="personal-details-form-container"></div>
            </div>
        </div>
    </div>

    <script>
        setupPersonalDataForm(
            {{ (user.id if user != session.user else none) | tojson }},
            {{ user_values | tojson }},
            {{ current_affiliation | tojson }},
            {{ titles | tojson }},
            {{ user.synced_values | tojson }},
            {{ locked_fields | tojson }},
            {{ locked_field_message | tojson }},
            {{ has_predefined_affiliations | tojson }},
            {{ allow_custom_affiliations | tojson }}
        );
    </script>
{% endblock %}
