{% load i18n phoxtail_core_tags phoxtail_design_tags %}
{% comment %}
The form alone, so a failed save can re-render it in place through an
out-of-band swap: re-rendering the whole drawer would tear the modal out
of the DOM and replay its open animation on every error.
{% endcomment %}
<form id="profile-update-form"
      method="POST"
      enctype="multipart/form-data"
      hx-post="{% url 'users:profile_update' %}"
      hx-disabled-elt="#base-modal .phoxtail-drawer__footer button"
      hx-swap="none">
    {% csrf_token %}
    {{ form.media }}
    <div class="phoxtail-form-stack">
        <div class="phx-card">
            <h3 class="phx-card__title">
                {% icon "person" %}
                {% translate "Personal" %}
            </h3>
            <div class="phoxtail-form-stack">
                {% field "input" form.first_name show_label=True show_help_text=False %}
                {% field "input" form.last_name show_label=True show_help_text=False %}
                {% field "input" form.born_at %}
                {% field "select" form.gender %}
                {% field "select" form.country %}
                {% field "phone" form.phone_number show_label=True show_help_text=False %}
            </div>
        </div>
        <div class="phx-card">
            <h3 class="phx-card__title">
                {% icon "image" %}
                {% translate "Avatar" %}
            </h3>
            <div class="usr-avatar-field">
                <label class="phx-button phx-button--secondary phx-button--full">
                    {% icon "image" %}
                    <span>{% translate "Choose an image" context "button" %}</span>
                    <input type="file"
                           class="phx-sr-only"
                           name="{{ form.avatar.name }}"
                           id="{{ form.avatar.id_for_label }}"
                           accept="image/*"
                           onchange="previewAvatar(event)">
                </label>
                {% if user.avatar %}
                    <label class="usr-avatar-field__clear">
                        <input type="checkbox"
                               name="{{ form.avatar.name }}-clear"
                               id="avatar-clear-checkbox"
                               onchange="handleClearAvatar(event)">
                        {% translate "Clear current avatar" %}
                    </label>
                {% endif %}
                {% for error in form.avatar.errors %}<p class="usr-avatar-field__error">{{ error }}</p>{% endfor %}
            </div>
        </div>
    </div>
</form>