{% props field: Field, label: String = "", description: String = "", indeterminate: bool = false, disabled: bool = false %}
{%- 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) } %}
{%- let detailed = !description.is_empty() || field.has_errors() %}
<div class="{% if detailed %}ui-field{% else %}ui-check-row{% end %}"{% if detailed %} data-orientation="horizontal"{% end %}>
<input type="hidden" name="{{ field.name }}" value="false"{% if disabled %} disabled{% end %}>
<input class="ui-checkbox" type="checkbox" id="{{ field.id }}" name="{{ field.name }}" value="true"{% if field.value == "true" %} checked{% end %}{% if indeterminate %} data-indeterminate{% end %}{% if detailed %} aria-describedby="{{ note }}"{% end %}{% if field.has_errors() %} aria-invalid="true"{% end %}{% if disabled %} disabled{% end %}>
{%- if detailed %}
<div class="ui-field-content">
<label class="ui-label" for="{{ field.id }}"{% if disabled %} data-disabled{% end %}>{{ label }}</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 %}
<p class="ui-field-description" id="{{ field.id }}-description">{{ description }}</p>
{%- end %}
</div>
{%- else %}
<label class="ui-label" for="{{ field.id }}"{% if disabled %} data-disabled{% end %}>{{ label }}</label>
{%- end %}
</div>