@props([
    'name',
    'label',
    'value'  => null,
    'icon'   => null,
    'rows'   => 3,
    'max'    => null,
    'helper' => null,
    'placeholder' => '',
])

@php
    $current = old($name, $value);
    $invalid = $errors->has($name);
    $id      = 'field-'.$name;
@endphp

{{-- The counter counts against the limit the SERVER enforces (passed in from
     CustomerRequest::MAX), so it can never promise room that validation will
     then refuse. --}}
<div x-data="{ focused: false, count: {{ mb_strlen((string) $current) }} }">
    <div class="mb-1.5 flex items-end justify-between gap-3">
        <label for="{{ $id }}" class="text-[11px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
            {{ $label }}
        </label>

        @if ($max)
            <span class="text-[11px] tabular-nums transition-colors"
                  :class="count > {{ (int) ($max * 0.9) }} ? 'text-amber-600 dark:text-amber-400' : 'text-slate-400 dark:text-slate-500'">
                <span x-text="count"></span> / {{ number_format($max) }}
            </span>
        @endif
    </div>

    <div class="relative">
        @if ($icon)
            <x-icon :name="$icon" class="pointer-events-none absolute left-3 top-3 size-4 transition-colors"
                    ::class="focused ? 'text-brand-500' : '{{ $invalid ? 'text-red-400' : 'text-slate-400' }}'" />
        @endif

        <textarea id="{{ $id }}"
                  name="{{ $name }}"
                  rows="{{ $rows }}"
                  placeholder="{{ $placeholder }}"
                  @if ($max) maxlength="{{ $max }}" @endif
                  @if ($invalid) aria-invalid="true" aria-describedby="{{ $id }}-error" @endif
                  @focus="focused = true" @blur="focused = false"
                  @input="count = $event.target.value.length"
                  {{ $attributes->merge(['class' => 'w-full resize-y rounded-xl border bg-white py-2.5 text-sm text-slate-900
                                                     transition duration-150 placeholder:text-slate-400 focus:outline-none
                                                     focus:ring-4 dark:bg-slate-900 dark:text-white
                                                     '.($icon ? 'pl-9 pr-3' : 'px-3').' '.
                                                     {{-- See form-field: dark:focus: must be explicit or the
                                                          dark border wins and the focus colour never shows. --}}
                                                     ($invalid
                                                         ? 'border-red-300 focus:border-red-400 focus:ring-red-500/10 dark:border-red-500/50 dark:focus:border-red-400'
                                                         : 'border-slate-200 focus:border-brand-400 focus:ring-brand-500/10 dark:border-slate-700 dark:focus:border-brand-400')]) }}>{{ $current }}</textarea>
    </div>

    @if ($invalid)
        <p id="{{ $id }}-error" role="alert" class="mt-1.5 flex items-center gap-1.5 text-xs font-medium text-red-600 dark:text-red-400">
            <x-icon name="alert" class="size-3.5 shrink-0" />
            {{ $errors->first($name) }}
        </p>
    @elseif ($helper)
        <p class="mt-1.5 text-xs text-slate-400 dark:text-slate-500">{{ $helper }}</p>
    @endif
</div>