@props([
    'name',
    'label',
    'value'    => null,
    'type'     => 'text',
    'icon'     => null,
    'required' => false,
    'helper'   => null,
    'max'      => null,
    'autofocus' => false,
])

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

{{-- One input definition for the whole app: icon, label, focus ring, error state
     and helper text stay identical wherever a field appears. --}}
<div x-data="{ focused: false }">
    <label for="{{ $id }}" class="mb-1.5 flex items-center gap-1 text-[11px] font-semibold uppercase tracking-wider
                                   text-slate-500 dark:text-slate-400">
        {{ $label }}
        @if ($required)
            <span class="text-red-500" aria-hidden="true">*</span>
            <span class="sr-only">(required)</span>
        @endif
    </label>

    <div class="relative">
        @if ($icon)
            {{-- The icon picks up the focus colour too, so the whole control
                 reacts as one thing rather than just the border. --}}
            <x-icon :name="$icon"
                    class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 transition-colors"
                    ::class="focused ? 'text-brand-500' : '{{ $invalid ? 'text-red-400' : 'text-slate-400' }}'" />
        @endif

        <input id="{{ $id }}"
               type="{{ $type }}"
               name="{{ $name }}"
               value="{{ $current }}"
               @if ($max) maxlength="{{ $max }}" @endif
               @if ($required) required aria-required="true" @endif
               @if ($invalid) aria-invalid="true" aria-describedby="{{ $id }}-error" @elseif ($helper) aria-describedby="{{ $id }}-helper" @endif
               @if ($autofocus) autofocus @endif
               @focus="focused = true" @blur="focused = false"
               {{ $attributes->merge(['class' => 'w-full 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').' '.
                                                  {{-- dark:focus: is needed explicitly: a bare focus:border-*
                                                       loses to dark:border-* in the cascade, so without it the
                                                       branded focus border simply never appears in dark mode. --}}
                                                  ($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')]) }}>
    </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 id="{{ $id }}-helper" class="mt-1.5 text-xs text-slate-400 dark:text-slate-500">{{ $helper }}</p>
    @endif
</div>