@props([
    'name',
    'label' => null,
    'value' => null,
    'required' => false,
    'optional' => false,
    'disabled' => false,
    'readonly' => false,
    'placeholder' => null,
    'help' => null,
    'error' => null,
    'rows' => 4,
    'maxlength' => null,
    'autoResize' => false,
    'counter' => false,
    // See input.blade.php's comment — same _field.blade.php superset guard.
    'type' => null,
    'checked' => false,
    'options' => [],
    'selected' => null,
    'existingUrl' => null,
    'aspectRatio' => null,
])

@php
    $resolvedError = $error ?? $errors->first($name);
@endphp

<x-forms.field :name="$name" :label="$label" :required="$required" :optional="$optional" :help="$help" :error="$resolvedError">
    <div x-data="{
            count: {{ strlen((string) $value) }},
            resize(el) {
                if (! {{ $autoResize ? 'true' : 'false' }}) return;
                el.style.height = 'auto';
                el.style.height = el.scrollHeight + 'px';
            },
         }"
         @if ($autoResize) x-init="resize($refs.textarea)" @endif>
        <textarea
            id="{{ $name }}"
            name="{{ $name }}"
            x-ref="textarea"
            rows="{{ $rows }}"
            @input="count = $el.value.length; resize($el)"
            @if ($maxlength) maxlength="{{ $maxlength }}" @endif
            @if ($required) required @endif
            @if ($disabled) disabled @endif
            @if ($readonly) readonly @endif
            @if ($placeholder) placeholder="{{ $placeholder }}" @endif
            @if ($name) aria-describedby="{{ $resolvedError ? $name.'-error' : ($help ? $name.'-help' : '') }}" @endif
            {{ $attributes->merge(['class' => 'w-full rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-slate-900 shadow-sm placeholder:text-slate-400 transition focus:border-primary focus:outline-none focus:ring-4 focus:ring-primary/15 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400'.($autoResize ? ' resize-none overflow-hidden' : ' resize-y')]) }}
        >{{ $value }}</textarea>

        @if ($counter && $maxlength)
            <p class="mt-1 text-right text-xs text-slate-400" x-text="count + ' / {{ $maxlength }}'"></p>
        @endif
    </div>
</x-forms.field>