{% props field: Field, label: String = "", rows: i64 = 8, hint: String = "" %}
{#- The server HTML is the textarea; the controller adds the toolbar and editable area and writes clean HTML back into it. The server sanitises on save. #}
{%- let label = if label.is_empty() { field.label.clone() } else { label } %}
<div class="ui-field">
<label class="ui-label" for="{{ field.id }}">{{ label }}</label>
<div class="ui-rte" data-ui="rich-text"{% if field.has_errors() %} aria-invalid="true"{% end %}>
<textarea class="ui-textarea" id="{{ field.id }}" name="{{ field.name }}" rows="{{ rows }}"{% if field.has_errors() %} aria-invalid="true" aria-describedby="{{ field.id }}-error"{% end %}>{{ field.value }}</textarea>
{%- if !hint.is_empty() %}
<div class="ui-rte-foot"><span>{{ hint }}</span></div>
{%- 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>
{%- end %}
</div>