{% load ui_classes ui_props %}

<c-vars type="text"
        name=""
        value=""
        placeholder=""
        size="lg"
        variant="outline"
        radius="md"
        disabled="False"
        readonly="False"
        required="False"
        invalid="False"
        icon=""
        icon_trailing=""
        icon_variant="outline"
        clearable="False"
        copyable="False"
        kbd=""
        prefix=""
        suffix=""
        root_class=""
        control_class=""
        class="" />
{% ui_class "ui.input" "root" class=root_class as root_class_resolved %}
{% ui_class "ui.input" "control" size=size variant=variant radius=radius class=control_class as control_class_resolved %}
{% ui_class "ui.input" "input" class=class as input_class %}
{% ui_class "ui.input" "icon" position="leading" as leading_icon_class %}
{% ui_class "ui.input" "icon" position="trailing" as trailing_icon_class %}
{% ui_class "ui.input" "action" as action_class %}
{% ui_class "ui.input" "kbd" as kbd_class %}
{% ui_class "ui.input" "affix" position="prefix" as prefix_class %}
{% ui_class "ui.input" "affix" position="suffix" as suffix_class %}
{% if type == "file" %}
    <c-ui.file-upload.control name="{{ name }}"
                              required="{{ required }}"
                              disabled="{{ disabled }}"
                              invalid="{{ invalid }}"
                              class="{{ class }}"
                              :attrs="attrs" />
{% else %}
    <div x-data="UiInput"
         data-ui-input-root
         data-size="{{ size }}"
         data-variant="{{ variant }}"
         data-radius="{{ radius }}"
         data-type="{{ type }}"
         data-name="{{ name }}"
         data-value="{{ value }}"
         data-placeholder="{{ placeholder }}"
         data-icon="{{ icon }}"
         data-icon-trailing="{{ icon_trailing }}"
         data-icon-variant="{{ icon_variant }}"
         {% 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 %}
         {% if clearable|ui_bool %}data-clearable="true"{% endif %}
         {% if copyable|ui_bool %}data-copyable="true"{% endif %}
         {% if kbd %}data-kbd="{{ kbd }}"{% endif %}
         class="{{ root_class_resolved }}">
        <div data-ui-control
             data-ui-input-control
             x-bind:data-disabled="props.disabled ? 'true' : null"
             x-bind:data-invalid="props.invalid ? 'true' : null"
             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 }}">
            {% if icon %}
                <c-component is="icons.{{ icon }}"
                             class="{{ leading_icon_class }}"
                             data-ui-input-icon="leading"
                             data-icon="{{ icon }}"
                             data-icon-variant="{{ icon_variant }}"
                             aria-hidden="true" />
            {% endif %}
            {% if prefix %}
                <span data-ui-input-group-prefix class="{{ prefix_class }}">{{ prefix }}</span>
            {% endif %}
            <input type="{{ type }}"
                   x-bind:type="props.type"
                   x-bind:name="props.name || null"
                   x-bind:placeholder="props.placeholder || null"
                   x-bind:disabled="props.disabled"
                   x-bind:readonly="props.readonly"
                   x-bind:required="props.required"
                   x-bind:aria-invalid="props.invalid ? 'true' : null"
                   data-ui-input
                   data-size="{{ size }}"
                   class="{{ input_class }}"
                   {% if name %}name="{{ name }}"{% endif %}
                   {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
                   {% if value and type != "file" %}value="{{ value }}"{% 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 }}>
            {% if suffix %}<span data-ui-input-group-suffix class="{{ suffix_class }}">{{ suffix }}</span>{% endif %}
            {% if clearable|ui_bool %}
                <button type="button"
                        data-ui-input-action
                        data-ui-input-clear
                        x-bind:disabled="props.disabled || props.readonly"
                        class="{{ action_class }}"
                        aria-label="Clear"
                        {% if disabled|ui_bool or readonly|ui_bool %}disabled{% endif %}
                        {% if not value %}hidden{% endif %}>
                    <c-component is="icons.close" class="size-icon-xs fill-current" aria-hidden="true" />
                </button>
            {% endif %}
            {% if copyable|ui_bool %}
                <button type="button"
                        data-ui-input-action
                        data-ui-input-copy
                        x-bind:disabled="props.disabled"
                        class="{{ action_class }}"
                        aria-label="Copy"
                        {% if disabled|ui_bool %}disabled{% endif %}>
                    <c-component is="icons.checkmark" class="size-icon-xs fill-current" aria-hidden="true" />
                </button>
            {% endif %}
            {% if kbd %}<kbd data-ui-input-kbd class="{{ kbd_class }}">{{ kbd }}</kbd>{% endif %}
            {% if icon_trailing %}
                <c-component is="icons.{{ icon_trailing }}"
                             class="{{ trailing_icon_class }}"
                             data-ui-input-icon="trailing"
                             data-icon="{{ icon_trailing }}"
                             data-icon-variant="{{ icon_variant }}"
                             aria-hidden="true" />
            {% endif %}
        </div>
    </div>
{% endif %}