{% props field: Field, max: i64, label: String = "", r#type: String = "textarea" %}
{#- r#type: "textarea" or an input type. The count is the server's; the controller keeps it live. #}
{%- let label = if label.is_empty() { field.label.clone() } else { label } %}
{%- let left = max - field.value.chars().count() as i64 %}
{%- let invalid = left < 0 || field.has_errors() %}
<div class="ui-field" data-ui="character-count" data-max="{{ max }}">
<label class="ui-label" for="{{ field.id }}">{{ label }}</label>
{%- if r#type == "textarea" %}
<textarea class="ui-textarea" id="{{ field.id }}" name="{{ field.name }}" aria-describedby="{{ field.id }}-count"{% if invalid %} aria-invalid="true"{% end %}>{{ field.value }}</textarea>
{%- else %}
<input class="ui-input" type="{{ r#type }}" id="{{ field.id }}" name="{{ field.name }}" value="{{ field.value }}" aria-describedby="{{ field.id }}-count"{% if invalid %} aria-invalid="true"{% end %}>
{%- end %}
{%- if field.value.is_empty() %}
<p class="ui-count" id="{{ field.id }}-count" aria-live="polite">You can enter up to {{ max }} characters</p>
{%- else %}{% if left < 0 %}
<p class="ui-count" id="{{ field.id }}-count" aria-live="polite" data-state="over">You have {{ -left }} {% if left == -1 %}character{% else %}characters{% end %} too many</p>
{%- else %}
<p class="ui-count" id="{{ field.id }}-count" aria-live="polite">You have {{ left }} {% if left == 1 %}character{% else %}characters{% end %} remaining</p>
{%- end %}{% end %}
{%- if field.has_errors() %}
<p class="ui-field-error" id="{{ field.id }}-error">{%- for message in field.errors.iter() %}{{ label }} {{ message }}. {% end %}</p>
{%- end %}
</div>