@props([
    'id' => null,
    'name',
    'label' => null,
    'value' => null,
    'type' => 'text',
    'placeholder' => null,
    'hint' => null,
    'error' => null,
    'required' => false,
    'disabled' => false,
    'readonly' => false,
    'loading' => false,
    'wide' => false,
    'prefix' => null,
    'suffix' => null,
])

@php
    $id = $id ?: $name;
    $viewErrors = isset($errors) && $errors instanceof \Illuminate\Support\ViewErrorBag ? $errors : null;
    $error = $error ?: ($viewErrors?->has($name) ? $viewErrors->first($name) : null);
    $describedBy = collect([
        filled($hint) ? $id.'_hint' : null,
        filled($error) ? $id.'_error' : null,
        $attributes->get('aria-describedby'),
    ])->filter()->unique()->implode(' ');
    $controlAttributes = $attributes->except(['aria-describedby', 'aria-invalid', 'aria-busy']);
@endphp

<x-ui.form-field
    :id="$id"
    :label="$label"
    :hint="$hint"
    :error="$error"
    :required="$required"
    :disabled="$disabled"
    :loading="$loading"
    :wide="$wide"
>
    <div @class(['ui-input-shell', 'has-prefix' => filled($prefix), 'has-suffix' => filled($suffix)])>
        @if (filled($prefix))
            <span class="ui-input-adornment ui-input-adornment--prefix" aria-hidden="true">{{ $prefix }}</span>
        @endif
        <input
            {{ $controlAttributes->class('ui-form-control') }}
            id="{{ $id }}"
            name="{{ $name }}"
            type="{{ $type }}"
            value="{{ $value }}"
            @if (filled($placeholder)) placeholder="{{ $placeholder }}" @endif
            @if (filled($describedBy)) aria-describedby="{{ $describedBy }}" @endif
            @if (filled($error)) aria-invalid="true" @endif
            @if ($loading) aria-busy="true" @endif
            @required($required)
            @disabled($disabled || $loading)
            @readonly($readonly)
        >
        @if (filled($suffix))
            <span class="ui-input-adornment ui-input-adornment--suffix" aria-hidden="true">{{ $suffix }}</span>
        @endif
    </div>
</x-ui.form-field>