{% props field: Field, label: String = "", min: String = "", max: String = "", step: String = "", unit: String = "", decrease: String = "Decrease", increase: String = "Increase" %}
{#- unit: the unit and any derived value beside it ("seats · £96 per month"); decrease/increase: the buttons' labels ("Remove a seat"). The controller reveals the buttons. #}
{%- let label = if label.is_empty() { field.label.clone() } else { label } %}
{%- let n = field.value.trim().parse::<f64>().ok() %}
{%- let at_min = match (n, min.parse::<f64>()) { (Some(n), Ok(m)) => n <= m, _ => false } %}
{%- let at_max = match (n, max.parse::<f64>()) { (Some(n), Ok(m)) => n >= m, _ => false } %}
<div class="ui-field" style="width:auto">
<label class="ui-label" for="{{ field.id }}">{{ label }}</label>
<div class="ui-number-row"><div class="ui-number" data-ui="number-field"><button type="button" aria-label="{{ decrease }}" aria-controls="{{ field.id }}" hidden{% if at_min %} disabled{% end %}><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/></svg></button><input id="{{ field.id }}" type="number" name="{{ field.name }}" value="{{ field.value }}"{% if !min.is_empty() %} min="{{ min }}"{% end %}{% if !max.is_empty() %} max="{{ max }}"{% end %}{% if !step.is_empty() %} step="{{ step }}"{% end %} inputmode="numeric"{% if field.has_errors() %} aria-invalid="true" aria-describedby="{{ field.id }}-error"{% end %}><button type="button" aria-label="{{ increase }}" aria-controls="{{ field.id }}" hidden{% if at_max %} disabled{% end %}><svg class="ui-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14"/><path d="M12 5v14"/></svg></button></div>{% if !unit.is_empty() %}<span class="ui-number-unit" aria-live="polite">{{ unit }}</span>{% end %}</div>
{%- 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>