@props([
    'name',
    'label',
    'required' => false,
    'placeholder' => null,
    'helpText' => null,
])

@php
    $changed = ! $this->isOriginalValue($name);
    $existingValue = $this->customer->current_data[$name] ?? '';
    $hasError = $errors->has('current_data.' . $name);
    $placeholderText = filled($existingValue) ? $existingValue : $placeholder;
    $fieldId = 'field-' . $name;
    $errorId = $fieldId . '-error';
    $helpId = $fieldId . '-help';
@endphp

<div class="form-group">
    <label for="{{ $fieldId }}">
        {{ $label }}
        @if ($required)
            <span class="required">*</span>
        @endif
        @if ($changed)
            <span class="ml-1 text-xs font-normal text-amber-600">Spremenjeno</span>
        @endif
    </label>
    @if ($helpText)
        <p id="{{ $helpId }}" class="field-help-text text-xs text-gray-400 mb-1">{{ $helpText }}</p>
    @endif
    <input
        type="text"
        id="{{ $fieldId }}"
        wire:model.live.debounce.500ms="current_data.{{ $name }}"
        wire:focus="touch('{{ $name }}')"
        placeholder="{{ $placeholderText }}"
        aria-required="{{ $required ? 'true' : 'false' }}"
        aria-invalid="{{ $hasError ? 'true' : 'false' }}"
        @if ($hasError || $helpText)
            aria-describedby="{{ trim(($hasError ? $errorId : '') . ' ' . ($helpText ? $helpId : '')) }}"
        @endif
        @class([
            'error' => $hasError,
            '' => $changed && ! $hasError,
        ])
    >
    @error('current_data.' . $name)
        <p id="{{ $errorId }}" class="field-errors text-sm text-red-600 mt-1">{{ $message }}</p>
    @enderror
</div>