{% load i18n %}
<form hx-post="{% url 'crochet:account_settings_display_name' %}" hx-target="this" hx-swap="outerHTML"
  class="flex flex-col gap-3">
  {% csrf_token %}
  {% if display_name_updated %}
    <div role="alert" class="alert alert-success alert-soft">
      <span>{% trans 'Nombre actualizado.' %}</span>
    </div>
  {% endif %}
  <label class="flex flex-col gap-1">
    <span class="text-sm">{{ display_name_form.display_name.label }}</span>
    {{ display_name_form.display_name }}
    {% for error in display_name_form.display_name.errors %}
      <span class="text-error text-xs">{{ error }}</span>
    {% endfor %}
  </label>
  <button type="submit" class="btn btn-primary self-start">{% trans 'Guardar nombre' %}</button>
</form>