{% load ui_assets ui_classes ui_props %}
{% ui_require_asset "trellis:field" %}

<c-vars name=""
        legend=""
        description=""
        error=""
        errors=""
        layout="stack"
        disabled="False"
        required="False"
        invalid="False"
        class="" />
{% ui_class "ui.field" "fieldset" layout=layout class=class as fieldset_class %}
<fieldset x-data="UiField"
          data-ui-fieldset
          data-layout="{{ layout }}"
          {% if name %}data-name="{{ name }}"{% endif %}
          {% if disabled|ui_bool %}disabled data-disabled="true"{% endif %}
          {% if required|ui_bool %}data-required="true"{% endif %}
          {% if invalid|ui_bool or error or errors %}data-prop-invalid data-invalid="true"{% endif %}
          class="{{ fieldset_class }}"
          {{ attrs }}>
    {% if legend %}
        <c-ui.fieldset.legend required="{{ required }}">
            {{ legend }}
        </c-ui.fieldset.legend>
    {% endif %}
    {% if description %}
        <c-ui.field.description>
            {{ description }}
        </c-ui.field.description>
    {% endif %}
    {% if error or errors %}
        <c-ui.field.error message="{{ error }}" :errors="errors" />
    {% endif %}
    {{ slot }}
</fieldset>