{# prefix: text on a muted tab before the input ("https://"); before/after: icons, Kbd or a ghost button. #}
{% props field: Field, label: String = "", description: String = "", r#type: String = "text", placeholder: String = "", prefix: String = "", readonly: bool = false, before: Slot = Slot::default(), after: Slot = Slot::default() %}
{%- let label = if label.is_empty() { field.label.clone() } else { label } %}
{%- let note = if field.has_errors() { format!("{}-error", field.id) } else { format!("{}-description", field.id) } %}
<div class="ui-field">
<label class="ui-label" for="{{ field.id }}">{{ label }}</label>
<div class="ui-input-group">
{%- if !prefix.is_empty() %}<span class="ui-input-group-text">{{ prefix }}</span>{% end %}
{%- if !before.to_html().trim().is_empty() %}<span class="ui-input-group-addon">{{ before }}</span>{% end %}
<input class="ui-input" type="{{ r#type }}" id="{{ field.id }}" name="{{ field.name }}" value="{{ field.value }}"{% if !placeholder.is_empty() %} placeholder="{{ placeholder }}"{% end %}{% if readonly %} readonly{% end %} aria-describedby="{{ note }}"{% if field.has_errors() %} aria-invalid="true"{% end %}>
{%- if !after.to_html().trim().is_empty() %}<span class="ui-input-group-addon">{{ after }}</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>
{%- else %}{% if !description.is_empty() %}
<p class="ui-field-description" id="{{ field.id }}-description">{{ description }}</p>
{%- end %}{% end %}
</div>