{% props field: Field, r#type: String = "text", label: String = "", description: String = "", step: String = "", inner_block: 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) } %}
{%- if r#type == "checkbox" %}
<div class="ui-field" data-orientation="horizontal">
<input type="hidden" name="{{ field.name }}" value="false">
<input class="ui-checkbox" type="checkbox" id="{{ field.id }}" name="{{ field.name }}" value="true"{% if field.value == "true" %} checked{% end %}{% if field.has_errors() %} aria-invalid="true"{% end %}>
<div class="ui-field-content">
<label class="ui-label" for="{{ field.id }}">{{ label }}</label>
{%- if !description.is_empty() %}
<p class="ui-field-description" id="{{ field.id }}-description">{{ description }}</p>
{%- end %}
</div>
</div>
{%- else %}
<div class="ui-field">
<label class="ui-label" for="{{ field.id }}">{{ label }}</label>
{%- if r#type == "textarea" %}
<textarea class="ui-textarea" id="{{ field.id }}" name="{{ field.name }}" rows="6" aria-describedby="{{ note }}"{% if field.has_errors() %} 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="{{ note }}"{% if field.has_errors() %} aria-invalid="true"{% end %}{% if !step.is_empty() %} step="{{ step }}"{% end %}>
{%- end %}
{{ 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 %}