{% load i18n %}
<!-- hx-target="this"/hx-swap="outerHTML": la respuesta (éxito o con
     errores de validación) sustituye este mismo <form>, así que no hace
     falta JS propio para pintar el resultado. -->
<form hx-post="{% url 'crochet:account_settings_email' %}" hx-target="this" hx-swap="outerHTML"
  class="flex flex-col gap-3">
  {% csrf_token %}
  {% if email_updated %}
    <div role="alert" class="alert alert-success alert-soft">
      <span>{% trans 'Email actualizado.' %}</span>
    </div>
  {% endif %}
  <label class="flex flex-col gap-1">
    <span class="text-sm">{{ email_form.email.label }}</span>
    {{ email_form.email }}
    {% for error in email_form.email.errors %}
      <span class="text-error text-xs">{{ error }}</span>
    {% endfor %}
  </label>
  <button type="submit" class="btn btn-primary self-start">{% trans 'Guardar email' %}</button>
</form>