<input 
    type="text" 
    id="{{input__id}}"
    name="{{ input__name }}" 
    value="{% if input__value is not None %}{{input__value}}{% endif %}"
    class="{% if input__classes %}{{input__classes}}{% else %}od w-full{% endif %}{% if input__errors %} outline outline-rose-500 input-with-error {% endif %}"
    {{input__attrs}}
>



<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Select the slug field by its ID
        const slugField = document.querySelector("[name={{input__name}}]");

        // Function to validate slug format (only lowercase, numbers, hyphens, and underscores)
        function validateSlug(value) {
            const pattern = /^[a-z0-9-]+$/i;  // Only letters, numbers, and hyphens (no spaces, no other characters)
            return pattern.test(value);
        }

        // Replace spaces with hyphens on initial load
        slugField.value = slugField.value.replaceAll(" ", "-");

        // Add event listener for 'blur' event (when the field loses focus)
        slugField.addEventListener("blur", function (e) {
            const value = e.target.value.trim();

            // Replace spaces with hyphens on blur
            e.target.value = e.target.value.replaceAll(" ", "-");

            // Validate the slug
            if (!validateSlug(value)) {
                // If it's not a valid slug, set aria-invalid to true
                e.target.setAttribute('aria-invalid', 'true');
            } else {
                // If valid, remove the aria-invalid attribute
                e.target.removeAttribute('aria-invalid');
            }
        });

        slugField.addEventListener("focus",(e)=>{
            e.target.removeAttribute('aria-invalid');
        })
    });
</script>

