{# legend_size="page" makes the legend the page heading (wrapped in an h1). error: a message about the group as a whole. #}
{% props legend: String, id: String, hint: String = "", error: String = "", legend_size: String = "", disabled: bool = false, inner_block: Slot %}
{%- let described = [(!hint.is_empty()).then(|| format!("{id}-hint")), (!error.is_empty()).then(|| format!("{id}-error"))].into_iter().flatten().collect::<Vec<_>>().join(" ") %}
<fieldset class="ui-fieldset-box" id="{{ id }}"{% if !described.is_empty() %} aria-describedby="{{ described }}"{% end %}{% if !error.is_empty() %} aria-invalid="true"{% end %}{% if disabled %} disabled{% end %}>
{%- if legend_size == "page" %}
<legend><h1 class="ui-legend-title" data-size="page">{{ legend }}</h1></legend>
{%- else %}
<legend><span class="ui-legend-title">{{ legend }}</span></legend>
{%- end %}
{%- if !hint.is_empty() %}
<p class="ui-fieldset-hint" id="{{ id }}-hint">{{ hint }}</p>
{%- end %}
{%- if !error.is_empty() %}
<.error_message id={format!("{id}-error")}>{{ error }}</.error_message>
{%- end %}
{{ inner_block }}
</fieldset>