{% load ui_classes ui_props %}

<c-vars name=""
        value=""
        placeholder=""
        size="lg"
        variant="outline"
        radius="md"
        rows="4"
        resize="vertical"
        disabled="False"
        readonly="False"
        required="False"
        invalid="False"
        root_class=""
        control_class=""
        class="" />
{% ui_class "ui.textarea" "root" class=root_class as root_class_resolved %}
{% ui_class "ui.textarea" "control" size=size variant=variant radius=radius class=control_class as control_class_resolved %}
{% ui_class "ui.textarea" "textarea" resize=resize class=class as textarea_class %}
<div data-ui-textarea-root
     data-size="{{ size }}"
     data-variant="{{ variant }}"
     data-radius="{{ radius }}"
     data-resize="{{ resize }}"
     data-name="{{ name }}"
     data-value="{{ value }}"
     data-placeholder="{{ placeholder }}"
     {% if disabled|ui_bool %}data-disabled="true"{% endif %}
     {% if readonly|ui_bool %}data-readonly="true"{% endif %}
     {% if required|ui_bool %}data-required="true"{% endif %}
     {% if invalid|ui_bool %}data-invalid="true"{% endif %}
     class="{{ root_class_resolved }}">
    <div data-ui-control
         data-ui-textarea-control
         data-variant="{{ variant }}"
         data-radius="{{ radius }}"
         {% if disabled|ui_bool %}data-disabled="true"{% endif %}
         {% if invalid|ui_bool %}data-invalid="true"{% endif %}
         class="{{ control_class_resolved }}">
        <textarea data-ui-textarea
                  data-size="{{ size }}"
                  data-resize="{{ resize }}"
                  rows="{{ rows }}"
                  class="{{ textarea_class }}"
                  {% if name %}name="{{ name }}"{% endif %}
                  {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
                  {% if disabled|ui_bool %}disabled{% endif %}
                  {% if readonly|ui_bool %}readonly{% endif %}
                  {% if required|ui_bool %}required{% endif %}
                  {% if invalid|ui_bool %}aria-invalid="true"{% endif %}
                  {{ attrs }}>{{ value }}</textarea>
    </div>
</div>