{% load ui_classes ui_props %}

<c-vars name=""
        control_id=""
        label=""
        description=""
        description_trailing=""
        error=""
        errors=""
        badge=""
        orientation="vertical"
        layout="stack"
        disabled="False"
        required="False"
        invalid="False"
        class="" />
{% ui_class "ui.field" "field" layout=layout orientation=orientation class=class as field_class %}
{% ui_class "ui.field" "control" as control_class %}
<div x-data="UiField"
     data-ui-field
     data-layout="{{ layout }}"
     {% if name %}data-name="{{ name }}"{% endif %}
     {% if disabled|ui_bool %}data-disabled="true"{% endif %}
     {% if required|ui_bool %}data-required="true"{% endif %}
     {% if invalid|ui_bool or error or errors %}data-invalid="true"{% endif %}
     class="{{ field_class }}"
     {{ attrs }}>
    {% if label %}
        <c-ui.field.label control_id="{{ control_id }}" badge="{{ badge }}" required="{{ required }}">
            {{ label }}
        </c-ui.field.label>
    {% 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 %}
    <div data-ui-field-control class="{{ control_class }}">{{ slot }}</div>
    {% if description_trailing %}
        <c-ui.field.description position="trailing">
            {{ description_trailing }}
        </c-ui.field.description>
    {% endif %}
</div>