{% extends theme("user/settings_layout.html") %}

{% block settings_content %}
    {%- from theme("_macros/form.html") import horizontal_field, field_label, render_input_field %}
    {%- from theme("_macros/utils.html") import avatar_img %}

    <div class="card page" id="change-avatar">
        <div class="card-header page-header">{% trans %}Change Avatar{% endtrans %}</div>
        <div class="card-body page-body">
            <form role="form" method="post" enctype="multipart/form-data">
                {{ form.hidden_tag() }}

                {{ horizontal_field(form.avatar, div_class="col-5") }}

                <div class="row mb-3">
                    <div class="offset-3 col-5">
                        <div class="d-flex justify-content-center align-items-center">
                            <label>{% trans %}Current Avatar{% endtrans %}</label>
                        </div>
                        <div class="d-flex justify-content-center align-items-center">
                            {{ avatar_img(user, size=150, class="profilepicture rounded") }}
                        </div>
                        {% if user.avatar %}
                            <div class="d-flex justify-content-center align-items-center deleteavatar">
                                {# hx-params="none" keeps the surrounding form, and a picked file, out of the request #}
                                <button type="button"
                                        class="btn btn-sm"
                                        hx-post="{{ url_for('user.delete_avatar') }}"
                                        hx-params="none"
                                        hx-confirm="{{ _('Are you sure?') }}"
                                        hx-target="#change-avatar"
                                        hx-select="#change-avatar"
                                        hx-swap="outerHTML"
                                        hx-select-oob="#flashed-messages">
                                    <span class="fas fa-fw fa-trash text-danger"></span>
                                    {% trans %}Delete Avatar{% endtrans %}
                                </button>
                            </div>
                        {% endif %}
                    </div>
                </div>

                {{ horizontal_field(form.submit, div_class="offset-3 col-4") }}

            </form>
        </div>
    </div>
{% endblock %}