<div class="flex flex-col gap-4">
    {% if label is defined %}
        <label for="{{ name }}" class="flex flex-col gap-2">
            <span class="font-semibold">
                {{ label }}
                {% if required is defined %}
                    <span class="{{ colors.error.text }} ml-4">
                        *
                    </span>
                {% endif %}
                {% if optional is defined %}
                    <span class="text-sm font-normal {{ colors.text.muted }}">
                        - (optional)
                    </span>
                {% endif %}
            </span>
            {% if subtext is defined %}
                <span class="text-sm {{ colors.text.muted }}">
                    {{ subtext }}
                </span>
            {% endif %}
        </label>
    {% endif %}
    {% if desc is defined %}
        <p class="text-sm mt-1">
            {{ desc }}
        </p>
    {% endif %}

    <input type="{{ type }}" name="{{ name }}" {% if placeholder %} placeholder="{{ placeholder }}" {% endif %} {% if value is not null %} value="{{ value }}" {% endif %} {% if readonly is not null %} readonly {% endif %} {% if required is defined %} required {% endif %} {% if type == 'number' %} {% if min is defined %} min="{{ min }}" {% endif %} {% if max is defined %} max="{{ max }}" {% endif %} {% endif %} class="{{ colors.input }} w-full p-3 h-[42px] border focus:ring-1 focus:outline-none"></div>
    