<div class="user-form">
    <div class="form">
        {% csrf_token %}
        <div class="form__input {% if form.username.errors or form.non_field_errors %}has-error{% endif %}">
            {{ form.username }}
            <span class="form__input__bar"></span>
            {% include 'users/modules/_form_field_errors.html' with errors=form.username.errors %}
            <label>{{ form.username.label }}</label>
            <button id="usernameSubmitButton"
                    type="submit"
                    class="form__input__button form__input__button--white form__input__button--small"
                    {% if not form.username.errors and not form.non_field_errors %}style="display: none;"{% endif %}>Zapisz
            </button>
            {% if not form.username.errors and not form.non_field_errors %}
                <div class="form__input__button form__input__button--white form__input__button--small edit-save-button username-edit-view">
                    Edytuj
                </div>
            {% endif %}
        </div>
        <div class="form__hint username-hint-wrapper" style="display: none">
            <div class="form__hint__image"></div>
            <div class="form__hint__description">Podanie nazwy użytkownika jest obowiązkowe, pomoże ona innym osobom
                wyszukiwać i oceniać Twoje prezentacje.
            </div>
        </div>
        <div class="form__input {% if form.email.errors or form.non_field_errors %}has-error{% endif %}">
            {{ form.email }}
            <span class="form__input__bar"></span>
            {% include 'users/modules/_form_field_errors.html' with errors=form.email.errors %}
            <label>{{ form.email.label }}</label>
            <button id="emailSubmitButton"
                    type="submit"
                    class="form__input__button form__input__button--white form__input__button--small"
                    {% if not form.email.errors and not form.non_field_errors %}style="display: none;"{% endif %}>Zapisz
            </button>
            {% if not form.email.errors and not form.non_field_errors %}
                <div class="form__input__button form__input__button--white form__input__button--small edit-save-button">
                    Edytuj
                </div>
            {% endif %}
        </div>
        <div class="form__input {% if form.new_password1.errors or form.non_field_errors %}has-error{% endif %}">
            {{ form.new_password1 }}
            <span class="form__input__bar"></span>
            {% include 'users/modules/_form_field_errors.html' with errors=form.new_password1.errors %}
            <label>{{ form.new_password1.label }}</label>
            <button id="passwordSubmitButton"
                    type="submit"
                    class="form__input__button form__input__button--white form__input__button--small"
                    {% if not form.new_password2.errors and not form.non_field_errors %}style="display: none;"{% endif %}>Zapisz
            </button>
            {% if not form.new_password2.errors and not form.non_field_errors %}
                <div class="form__input__button form__input__button--white form__input__button--small edit-save-button password-edit-view">
                    Edytuj
                </div>
            {% endif %}
        </div>
        <div class="form__input {% if form.new_password2.errors or form.non_field_errors %}has-error{% endif %} new-password-2-wrapper"
             {% if not form.new_password2.errors and not form.non_field_errors %}style="display: none;"{% endif %}>
            {{ form.new_password2 }}
            <span class="form__input__bar"></span>
            {% include 'users/modules/_form_field_errors.html' with errors=form.new_password2.errors %}
            <label>{{ form.new_password2.label }}</label>
        </div>
        {% if form.non_field_error.count %}
            <div class="form__hint has-error">
                <div class="form__hint__image"></div>
                {% for error in form.non_field_errors %}
                    <div class="form__hint__description">{{ error }}</div>
                {% endfor %}
            </div>
        {% endif %}
    </div>
</div>

<script>
    userProfileHandler();
</script>
