{% load dcc_tags %}

{% if form %}
{% get_field_errors form name as field_errors %}
{% endif %}


<c-vars type="text" errors />

<div x-data="{ 
    errors: '', 
    showError: false, 
    errorTimer: {% if errorTimer %}{{ errorTimer }}{% else %}null{% endif %}
    }" x-init="
        if ({% if field_errors %}true{% else %}false{% endif %}) {
        showError = true; 
        errors = '{{ field_errors|join:', ' }}'; 
        if (errorTimer && errorTimer > 0) { 
            setTimeout(() => { showError = false; }, errorTimer); 
        }
    }">
    <input id="{{ id }}" type="{{ type }}" {{ attrs }}
        :class="{ 'border-red-500 focus-visible:outline-red-500': showError }" name="{{ name }}" {% if validationUrl %}
        hx-post="{{ validationUrl }}" hx-target="#error" hx-trigger="keyup delay:500ms" {% endif %}
        class="{% if class %}{{ class }}{% else %}w-full rounded-md border bg-neutral-50 px-2 py-2 text-sm focus-visible:outline focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:focus-visible:outline-white{% endif %}" />

    <!-- form-errors -->
    <template x-if="showError">
        <div class="text-red-500 text-sm mt-1" x-text="errors"></div>
    </template>
    <!-- form-errors end -->

    <!-- htmx-error -->
    <div id="error"></div>
    <!-- htmx-error end -->
</div>