{# field.value is "YYYY-MM-DD"; the parts are sent as field[day], field[month], field[year]. autocomplete="bday" for birth dates. #}
{% props field: Field, legend: String = "", hint: String = "", autocomplete: String = "" %}
{%- let legend = if legend.is_empty() { field.label.clone() } else { legend } %}
{%- let mut parts = field.value.splitn(3, '-').map(|p| p.trim_start_matches('0').to_owned()) %}
{%- let (year, month, day) = (parts.next().unwrap_or_default(), parts.next().unwrap_or_default(), parts.next().unwrap_or_default()) %}
{%- let described = [(!hint.is_empty()).then(|| format!("{}-hint", field.id)), field.has_errors().then(|| format!("{}-error", field.id))].into_iter().flatten().collect::<Vec<_>>().join(" ") %}
<fieldset class="ui-fieldset" role="group"{% if !described.is_empty() %} aria-describedby="{{ described }}"{% end %}>
<legend class="ui-legend">{{ legend }}</legend>
{%- if !hint.is_empty() %}
<p class="ui-field-description" id="{{ field.id }}-hint">{{ hint }}</p>
{%- end %}
{%- if field.has_errors() %}
<p class="ui-field-error" id="{{ field.id }}-error">{%- for message in field.errors.iter() %}{{ legend }} {{ message }}. {% end %}</p>
{%- end %}
<div class="ui-date-input">
{%- for (part, text, value, width) in [("day", "Day", &day, 56), ("month", "Month", &month, 56), ("year", "Year", &year, 80)] %}
<div class="ui-field"><label class="ui-label" for="{{ field.id }}-{{ part }}">{{ text }}</label><input class="ui-input" id="{{ field.id }}-{{ part }}" name="{{ field.name }}[{{ part }}]" inputmode="numeric" value="{{ value }}"{% if !autocomplete.is_empty() %} autocomplete="{{ autocomplete }}-{{ part }}"{% end %}{% if field.has_errors() %} aria-invalid="true"{% end %} style="width:{{ width }}px"></div>
{%- end %}
</div>
</fieldset>