{% load dcc_tags %}

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

<c-vars 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); 
        }
    }">
    <textarea id="{{ id }}" {{ attrs }}
        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 %}"
        {% if validationUrl %} hx-post="{{ validationUrl }}" hx-target="#error" hx-trigger="keyup delay:500ms"
        {% endif %}></textarea>

    <!-- form-errors -->
    <template x-if="showError">
        <div class="{% if errorDivClass %}{{ errorDivClass }}{% else %}text-red-500 text-sm mt-1{% endif %}"
            x-text="errors"></div>
    </template>
    <!-- form-errors end -->

</div>