{{--
    Floating-label text field with a leading icon.

    The label floats via the `peer-placeholder-shown` technique, which needs a
    literal single-space placeholder — without it the browser never reports the
    "empty" state and the label sits over the caret.

    Errors are rendered from the standard $errors bag and wired with
    aria-describedby / aria-invalid, so a screen reader announces the message
    with the field rather than as loose text further down the page.
--}}
@props([
    'name',
    'label',
    'type' => 'text',
    'icon' => 'envelope',
    'autocomplete' => null,
    'autofocus' => false,

    /*
     | An explicit starting value, for the one case old() cannot cover: the
     | password-reset form, where the address arrives in the signed link rather
     | than from a previous submission. Passing it through $attributes instead
     | would emit a second value attribute, and the hardcoded one below wins.
     |
     | Never honoured for password fields — see the input.
     */
    'value' => null,
])

@php
    $id = 'auth-'.$name;
    $hasError = $errors->has($name);
@endphp

<div>
    <div class="group relative">
        <span class="pointer-events-none absolute inset-y-0 start-0 z-10 flex items-center ps-4 text-slate-400 transition-colors duration-200 group-focus-within:text-brand-600 dark:group-focus-within:text-brand-400">
            <x-dash.icon :name="$icon" class="size-5" />
        </span>

        <input
            id="{{ $id }}"
            name="{{ $name }}"
            type="{{ $type }}"
            placeholder=" "
            {{-- A password is never re-rendered, whatever is passed in. --}}
            value="{{ $type === 'password' ? '' : old($name, $value) }}"
            @if ($autocomplete) autocomplete="{{ $autocomplete }}" @endif
            @if ($autofocus) autofocus @endif
            @if ($hasError) aria-invalid="true" aria-describedby="{{ $id }}-error" @endif
            required
            {{ $attributes->merge([
                'class' => 'peer h-16 w-full rounded-xl border bg-white/70 px-4 pt-6 ps-12 pb-2 text-[15px] text-slate-900 outline-none transition-all duration-200 placeholder:text-transparent focus:ring-4 dark:bg-slate-800/60 dark:text-white '
                    .($hasError
                        ? 'border-red-400 focus:border-red-500 focus:ring-red-500/15 dark:border-red-500/60'
                        : 'border-slate-200 hover:border-slate-300 focus:border-brand-500 focus:ring-brand-500/15 dark:border-slate-700 dark:hover:border-slate-600'),
            ]) }}>

        {{--
            The *floated* position is the base state and "resting over the
            caret" is the variant. Written the other way round, the resting
            size is a plain utility and the floated size a variant of equal
            weight, and which one wins comes down to Tailwind's emission order
            rather than intent. This way the filled state needs no override at
            all, and only :focus — which must beat the resting state — carries
            the important modifier.
        --}}
        <label for="{{ $id }}"
               class="pointer-events-none absolute start-12 top-4 z-10 translate-y-0 text-xs font-medium text-slate-500 transition-all duration-200
                      peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:text-[15px] peer-placeholder-shown:font-normal peer-placeholder-shown:text-slate-400
                      peer-focus:top-4! peer-focus:translate-y-0! peer-focus:text-xs! peer-focus:font-medium! peer-focus:text-brand-600
                      dark:text-slate-400 dark:peer-placeholder-shown:text-slate-500 dark:peer-focus:text-brand-400">
            {{ $label }}
        </label>

        {{-- Trailing control, e.g. the password reveal button. --}}
        {{ $slot }}
    </div>

    @error($name)
        <p id="{{ $id }}-error" class="mt-2 flex items-start gap-1.5 text-xs text-red-600 dark:text-red-400">
            <x-dash.icon name="exclamation-triangle" class="mt-px size-3.5 shrink-0" />
            <span>{{ $message }}</span>
        </p>
    @enderror
</div>