{% load i18n crispy_forms_tags avatar %}
{% comment %}
  Avatar subsection on the settings page. Mirrors the default
  ``settings-form`` partial but adds ``hx-encoding="multipart/form-data"``
  so the file upload is sent as binary. Also shows a live preview of the
  currently stored avatar via the ``{% avatar %}`` template tag.
{% endcomment %}
<section id="cj-settings-form-{{ plugin.name }}" class="cj-settings-form">
    <h3 class="card-title">{{ plugin.title }}</h3>
    <div class="ps-3">
        <div class="d-flex align-items-center gap-3 mb-3">
            {% avatar request.user size="xl" %}
            <div class="text-secondary small">
                {% trans "Your avatar is shown next to your name in the top bar and user lists. Clear the field to fall back to your initials." %}
            </div>
        </div>
        <form hx-post="{% url 'settings:form' plugin.name %}"
              hx-target="#cj-settings-form-{{ plugin.name }}"
              hx-swap="outerHTML"
              hx-encoding="multipart/form-data"
              enctype="multipart/form-data">
            {% csrf_token %}
            {{ form|crispy }}
            <div class="mt-3">
                <button type="submit" class="btn btn-sm btn-primary">
                    {% trans "Save" %}
                </button>
            </div>
        </form>
    </div>
</section>