@props([
    'name',
    'label',
    'required' => false,
    'hint' => null,
    'default' => null,
])

<div class="field {{ $errors->has($name) ? 'has-error' : '' }}" data-currency>
    <label for="{{ $name }}_display" class="field-label">
        {{ $label }}
        @if($required)<span class="req">*</span>@endif
    </label>

    <div class="field-currency">
        <span class="field-currency-prefix">$</span>
        <input
            type="text"
            inputmode="numeric"
            id="{{ $name }}_display"
            class="field-input"
            placeholder="0"
            autocomplete="off"
            data-currency-display
        >
    </div>
    <input type="hidden" name="{{ $name }}" value="{{ old($name, $default) }}" data-currency-value>

    @if($hint)
        <p class="field-hint">{{ $hint }}</p>
    @endif

    @error($name)
        <p class="field-error">{{ $message }}</p>
    @enderror
</div>