@php
    $hasError = false;
    if (isset($name)) { $hasError = $errors->has($name) && !$errorless; }
    isset($id) ? null : $id='';
@endphp

<div class="@if(isset($disabled)) opacity-60 @endif">
    @if ($label || $cornerHint)
        <div class="d-flex {{ !$label && $cornerHint ? 'justify-content-end' : 'justify-content-between' }} mb-1">
            @if ($label)
                <x-dynamic-component
                    component="label"
                    :label="$label"
                    :has-error="$hasError"
                    :for="$id"
                />
            @endif

            @if ($cornerHint)
                <x-dynamic-component
                    component="label"
                    :label="$cornerHint"
                    :has-error="$hasError"
                    :for="$id"
                />
            @endif
        </div>
    @endif

    <div class="relative rounded-md @unless($shadowless) shadow-sm123 @endunless">
        @if ($prefix || $icon)
            <div class="absolute inset-y-0 left-0 ps-2 d-flex align-items-center pointer-events-none
                {{ $hasError ? 'text-negative-500' : 'text-secondary-400' }}">
                @if ($icon)
                    <x-dynamic-component
                        component="icon"
                        :name="$icon"
                        class="icon-sm"
                    />
                @elseif($prefix)
                    <span class="pl-1 d-flex align-items-center self-center">
                        {{ $prefix }}
                    </span>
                @endif
            </div>
        @elseif($prepend)
            {{ $prepend }}
        @endif

        <input {{ $attributes->class([
                $getInputClasses($hasError),
            ])->merge([
                'type'         => 'text',
                'autocomplete' => 'off',
            ]) }} />

        @if ($suffix || $rightIcon || ($hasError && !$append))
            <div class="absolute inset-y-0 right-0 pe-2 d-flex align-items-center pointer-events-none
                {{ $hasError ? 'text-negative-500' : 'text-secondary-400' }}">
                @if ($rightIcon)
                    <x-dynamic-component
                        component="icon"
                        :name="$rightIcon"
                        class="icon-sm"
                    />
                @elseif ($suffix)
                    <span class="pe-1 d-flex align-items-center justify-content-center">
                        {{ $suffix }}
                    </span>
                @elseif ($hasError)
                    <!--x-dynamic-component
                        component="icon"
                        name="exclamation-circle"
                        class="icon-sm"
                    /-->
                @endif
            </div>
        @elseif ($append)
            {{ $append }}
        @endif
    </div>

    @if (!$hasError && $hint)
        <label @if ($id) for="{{ $id }}" @endif class="mt-2 text-sm text-secondary-500 dark:text-secondary-400">
            {{ $hint }}
        </label>
    @endif

    @if (isset($name) && !$errorless)
        <x-dynamic-component
            component="error"
            :name="$name"
        />
    @endif
</div>