{% 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 %}