@props([
    'name',
    'label' => null,
    'type' => 'text',
    'value' => null,
    'required' => false,
    'optional' => false,
    'disabled' => false,
    'readonly' => false,
    'placeholder' => null,
    'help' => null,
    'error' => null,
    'icon' => null,
    'prefix' => null,
    'suffix' => null,
    'copyable' => false,
    'loading' => false,
    // Not used by this component — declared so the CRUD generator's
    // _field.blade.php (which passes a fixed superset of props to whichever
    // component a field targets) doesn't leak these into $attributes, where
    // an array/bool value can't be cast to a string HTML attribute.
    'checked' => false,
    'options' => [],
    'selected' => null,
    'existingUrl' => null,
    'aspectRatio' => null,
])

@php
    $isPassword = $type === 'password';
    $resolvedError = $error ?? $errors->first($name);
    $hasLeftAdornment = $icon || $prefix;
    $hasRightAdornment = $isPassword || $copyable || $suffix || $loading;
@endphp

<x-forms.field :name="$name" :label="$label" :required="$required" :optional="$optional" :help="$help" :error="$resolvedError">
    <div x-data="{ show: false, copied: false }" class="relative">
        @if ($icon)
            <i class="fa-solid {{ $icon }} pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400" aria-hidden="true"></i>
        @elseif ($prefix)
            <span class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-slate-400">{{ $prefix }}</span>
        @endif

        <input
            id="{{ $name }}"
            name="{{ $name }}"
            @if ($isPassword) :type="show ? 'text' : 'password'" @else type="{{ $type }}" @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([
                'value' => $value,
                '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'
                    . ($hasLeftAdornment ? ' pl-10' : '')
                    . ($hasRightAdornment ? ' pr-10' : ''),
            ]) }}
        >

        @if ($isPassword)
            <button type="button" @click="show = !show" tabindex="-1"
                    class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 transition hover:text-primary"
                    :aria-label="show ? 'Hide password' : 'Show password'">
                <i class="fa-solid" :class="show ? 'fa-eye-slash' : 'fa-eye'" aria-hidden="true"></i>
            </button>
        @elseif ($copyable)
            <button type="button" tabindex="-1"
                    @click="navigator.clipboard.writeText($el.closest('.relative').querySelector('input').value); copied = true; setTimeout(() => copied = false, 1500)"
                    class="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 transition hover:text-primary"
                    aria-label="Copy to clipboard">
                <i class="fa-solid" :class="copied ? 'fa-check' : 'fa-copy'" aria-hidden="true"></i>
            </button>
        @elseif ($loading)
            <i class="fa-solid fa-spinner fa-spin pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-slate-400" aria-hidden="true"></i>
        @elseif ($suffix)
            <span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-sm text-slate-400">{{ $suffix }}</span>
        @endif
    </div>
</x-forms.field>