{% if field.type == "input" %}

<div class="w-full">
    <label
        for="{{ field.id }}"
        class="block text-sm font-medium text-slate-700 mb-1.5"
    >
        {{ field.label }}
        {% if field.required %}
            <span class="text-red-500">*</span>
        {% endif %}
    </label>

    <input
        id="{{ field.id }}"
        type="{{ field.field_type }}"
        name="{{ field.name }}"
        value="{{ field.value or '' }}"
        {% if field.required %}required{% endif %}
        {% if field.min_length %}minlength="{{ field.min_length }}"{% endif %}
        {% if field.max_length %}maxlength="{{ field.max_length }}"{% endif %}
        {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
        {% if field.autocomplete %}autocomplete="{{ field.autocomplete }}"{% endif %}
        class="
            w-full
            px-3.5 py-2.5
            rounded-xl
            border
            bg-white
            text-sm text-slate-800
            placeholder:text-slate-400
            outline-none
            transition
            {% if field.error %}
                border-red-400
                focus:ring-red-500
            {% else %}
                border-stone-300
                focus:border-primary
                focus:ring-primary
            {% endif %}
            focus:ring-2
            focus:ring-opacity-20
        "
    >

    {% if field.help_text %}
        <p class="mt-1.5 text-xs text-slate-500">
            {{ field.help_text }}
        </p>
    {% endif %}

    {% if field.error %}
        <p class="mt-1.5 text-xs text-red-500">
            {{ field.error }}
        </p>
    {% endif %}
</div>


{% elif field.type == "select" %}

<div class="w-full">
    <label
        for="{{ field.id }}"
        class="block text-sm font-medium text-slate-700 mb-1.5"
    >
        {{ field.label }}
        {% if field.required %}
            <span class="text-red-500">*</span>
        {% endif %}
    </label>

    <select
        id="{{ field.id }}"
        name="{{ field.name }}"
        {% if field.required %}required{% endif %}
        class="
            w-full
            px-3.5 py-2.5
            rounded-xl
            border
            bg-white
            text-sm text-slate-800
            outline-none
            transition
            {% if field.error %}
                border-red-400
                focus:ring-red-500
            {% else %}
                border-stone-300
                focus:border-primary
                focus:ring-primary
            {% endif %}
            focus:ring-2
            focus:ring-opacity-20
        "
    >
        {% for value, label in field.options %}
            <option
                value="{{ value }}"
                {% if value == field.value %}selected{% endif %}
            >
                {{ label }}
            </option>
        {% endfor %}
    </select>

    {% if field.help_text %}
        <p class="mt-1.5 text-xs text-slate-500">
            {{ field.help_text }}
        </p>
    {% endif %}

    {% if field.error %}
        <p class="mt-1.5 text-xs text-red-500">
            {{ field.error }}
        </p>
    {% endif %}
</div>


{% elif field.type == "checkbox" %}

<div class="w-full">

    <label
        for="{{ field.id }}"
        class="
            flex
            items-start
            gap-3
            cursor-pointer
            select-none
        "
    >
        <input
            id="{{ field.id }}"
            type="checkbox"
            name="{{ field.name }}"
            value="1"
            {% if field.value %}checked{% endif %}
            {% if field.required %}required{% endif %}
            class="
                mt-0.5
                h-4 w-4
                shrink-0
                rounded
                border-stone-300
                text-primary
                focus:ring-primary
            "
        >

        <span class="text-sm text-slate-700">
            {{ field.label }}
            {% if field.required %}
                <span class="text-red-500">*</span>
            {% endif %}
        </span>
    </label>

    {% if field.help_text %}
        <p class="mt-1.5 ml-7 text-xs text-slate-500">
            {{ field.help_text }}
        </p>
    {% endif %}

    {% if field.error %}
        <p class="mt-1.5 ml-7 text-xs text-red-500">
            {{ field.error }}
        </p>
    {% endif %}

</div>

{% endif %}