{% props field: Field, label: String = "", description: String = "", required: bool = false, orientation: String = "", inner_block: Slot %}
{#- inner_block: the control, with id="{field.id}" and aria-describedby="{field.id}-error" when invalid, else "{field.id}-description". #}
{%- let label = if label.is_empty() { field.label.clone() } else { label } %}
{%- if orientation == "horizontal" %}
<div class="ui-field" data-orientation="horizontal">
{{ inner_block }}
<div class="ui-field-content">
<label class="ui-label" for="{{ field.id }}">{{ label }}{% if required %} <span class="ui-req" aria-hidden="true">*</span>{% end %}</label>
{%- 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>
</div>
{%- else %}
<div class="ui-field">
<label class="ui-label" for="{{ field.id }}">{{ label }}{% if required %} <span class="ui-req" aria-hidden="true">*</span>{% end %}</label>
{{ inner_block }}
{%- 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>
{%- end %}