{% extends 'base.html' %}

{% block content %}
<div class="row mt-4">
    <div class="col">
        <h1 class="text-center display-3">{{ heading }}</h1>
    </div>
</div>
<form method="post" enctype="multipart/form-data">
    {{ form.csrf_token }}
    {% if not is_update %}
    <div class="mb-3">
        {{ form.username.label(class="form-label") }}
        {{ form.username(class="form-control" + (" is-invalid" if form.username.errors else "")) }}
        {% if form.username.errors %}
        {% for error in form.username.errors %}
        <div class="invalid-feedback">{{ error }}</div>
        {% endfor %}
        {% endif %}
    </div>
    {% endif %}
    <div class="mb-3">
        {{ form.email.label(class="form-label") }}
        {{ form.email(class="form-control" + (" is-invalid" if form.email.errors else "")) }}
        {% if form.email.errors %}
        {% for error in form.email.errors %}
        <div class="invalid-feedback">{{ error }}</div>
        {% endfor %}
        {% endif %}
    </div>
    <div class="mb-3">
        {{ form.first_name.label(class="form-label") }}
        {{ form.first_name(class="form-control" + (" is-invalid" if form.first_name.errors else "")) }}
        {% if form.first_name.errors %}
        {% for error in form.first_name.errors %}
        <div class="invalid-feedback">{{ error }}</div>
        {% endfor %}
        {% endif %}
    </div>
    <div class="mb-3">
        {{ form.last_name.label(class="form-label") }}
        {{ form.last_name(class="form-control" + (" is-invalid" if form.last_name.errors else "")) }}
        {% if form.last_name.errors %}
        {% for error in form.last_name.errors %}
        <div class="invalid-feedback">{{ error }}</div>
        {% endfor %}
        {% endif %}
    </div>
    <div class="mb-3">
        {{ form.display_name.label(class="form-label") }}
        {{ form.display_name(class="form-control" + (" is-invalid" if form.display_name.errors else "")) }}
        {% if form.display_name.errors %}
        {% for error in form.display_name.errors %}
        <div class="invalid-feedback">{{ error }}</div>
        {% endfor %}
        {% endif %}
        {% if not is_update %}
        <div id="displayNameHelp" class="form-text">
        Leave empty to use the first name. Will be displayed instead of the first name in some applications.
        </div>
        {% endif %}
    </div>
    <div class="mb-3">
        {{ form.password.label(class="form-label") }}
        {{ form.password(class="form-control" + (" is-invalid" if form.password.errors else "")) }}
        {% if form.password.errors %}
        {% for error in form.password.errors %}
        <div class="invalid-feedback">{{ error }}</div>
        {% endfor %}
        {% endif %}
        <div id="passwordHelp" class="form-text">
            {% if is_update %}
            Must be at least 8 characters long. Leave empty to keep the current password.
            {% else %}
            Must be at least 8 characters long.
            {% endif %}
        </div>
    </div>
    <div class="mb-3">
        {{ form.password_confirmation.label(class="form-label") }}
        {{ form.password_confirmation(class="form-control" + (" is-invalid" if form.password_confirmation.errors else "")) }}
        {% if form.password_confirmation.errors %}
        {% for error in form.password_confirmation.errors %}
        <div class="invalid-feedback">{{ error }}</div>
        {% endfor %}
        {% endif %}
    </div>
    <div class="mb-3">
        {{ form.picture.label(class="form-label") }}
        {{ form.picture(class="form-control" + (" is-invalid" if form.picture.errors else "")) }}
        {% if form.picture.errors %}
        {% for error in form.picture.errors %}
        <div class="invalid-feedback">{{ error }}</div>
        {% endfor %}
        {% endif %}
        <div id="pictureHelp" class="form-text">
            {% if is_update %}
            Only JPEG files can be used. Leave empty to keep the current picture.
            {% else %}
            Optional but recommended. Only JPEG files can be used.
            {% endif %}
        </div>
    </div>
    <div class="mb-3">
        {% if is_update %}
        <a class="btn btn-secondary"
            href="{{ url_for('usermanager.user_view', username=username) }}"
            role="button">Cancel</a>
        {% else %}
        <a class="btn btn-secondary"
            href="{{ url_for('usermanager.user_list') }}"
            role="button">Cancel</a>
        {% endif %}
        {{ form.submit(class_="btn btn-primary") }}
    </div>
</form>
{% endblock content %}
