{% load components %}

{# Enhanced by @uswds/uswds/js/usa-character-count at runtime (call ONLY #}
{# characterCount.init(), never .on()/.off()) — that script moves the field's #}
{# maxlength attribute to data-maxlength, hides the fallback message below, #}
{# and manages the live count/over-limit state itself. #}
{% with id|default:"character-count" as field_id %}
<div class="usa-character-count usx-character-count{% if className %} {{ className }}{% endif %}">
  {% if textArea %}
    {% text_area id=field_id formGroup=True label=label hint=hint error=error success=success disabled=disabled required=required screenReaderOnlyLabel=screenReaderOnlyLabel placeholder=placeholder defaultValue=defaultValue maxlength=max describedBy=field_id|add:"-info" className="usa-character-count__field" %}{% endtext_area %}
  {% else %}
    {% input id=field_id formGroup=True label=label hint=hint error=error success=success disabled=disabled required=required screenReaderOnlyLabel=screenReaderOnlyLabel placeholder=placeholder value=defaultValue maxlength=max describedBy=field_id|add:"-info" className="usa-character-count__field" %}{% endinput %}
  {% endif %}
  <span id="{{ field_id }}-info" class="usa-character-count__message">
    You can enter up to {{ max }} characters
  </span>
</div>

{% endwith %}