@props(['disabled' => false, 'errorBag'])

<div
        x-data="{
        remainingCharacters: {{ $limit - strlen(old($statePath, $getState())) }},
    }"
>
    <x-forms::container
            :component="$this"
            :disabled="$disabled"
            :error-bag="$errorBag"
    >
        <textarea
                {{ $attributes->merge(['class' => '']) }}
                {{ $disabled ? 'disabled' : '' }}
                @input="remainingCharacters = $refs.input.getAttribute('maxlength') - $event.target.value.length"
                @if ($tempFile)
                    x-model="file"
                @endif
                x-bind:maxlength="$refs.input.getAttribute('maxlength')"
                x-ref="input"
                x-on:keydown.enter="$event.target.form.dispatchEvent(new Event('submit'))"
                x-cloak
        ></textarea>

        <div x-show="remainingCharacters < {{ $limit }}" x-text="remainingCharacters + ' caracteres restantes'"></div>

        <x-forms::hint :hint="$hint" :hintId="$hintId" />
    </x-forms::container>
</div>