@props([
    'name',
    'label',
    'type' => 'text',
    'icon' => null,
    'toggle' => false,
    'value' => null,
    'required' => false,
    'autocomplete' => null,
    'autofocus' => false,
    'minlength' => null,
    'maxlength' => null,
    'min' => null,
    'max' => null,
    'step' => null,
    'id' => null,
    'hint' => null,
    'hintId' => null,
    'options' => null,
])

@php
    $fieldId = $id ?? $name;
    $isSelect = is_array($options);
    $selectedValue = old($name, $value);
@endphp

<div class="vpm-auth-float" {{ $attributes->only('class') }}>
    @if ($icon)
        <span class="material-icons vpm-auth-float__icon" aria-hidden="true">{{ $icon }}</span>
    @endif
    @if ($toggle)
        <button
            type="button"
            class="vpm-auth-float__toggle"
            tabindex="-1"
            aria-label="Show password"
            data-vpm-password-toggle
            data-vpm-password-target="{{ $fieldId }}"
        >
            <span class="material-icons" data-vpm-password-icon aria-hidden="true">visibility_off</span>
        </button>
    @endif
    <div class="vpm-auth-float__control">
        @if ($isSelect)
            <select
                id="{{ $fieldId }}"
                name="{{ $name }}"
                class="vpm-auth-float__input vpm-auth-float__input--select @error($name) vpm-auth-float__input--error @enderror"
                @if ($required) required @endif
                @if ($autocomplete) autocomplete="{{ $autocomplete }}" @endif
                @if ($autofocus) autofocus @endif
                @if ($hintId) aria-describedby="{{ $hintId }}" @endif
            >
                @foreach ($options as $optionValue => $optionLabel)
                    <option value="{{ $optionValue }}" @selected((string) $selectedValue === (string) $optionValue)>{{ $optionLabel }}</option>
                @endforeach
            </select>
            <label class="vpm-auth-float__label vpm-auth-float__label--fixed" for="{{ $fieldId }}">{{ $label }}</label>
        @else
            <input
                type="{{ $type }}"
                id="{{ $fieldId }}"
                name="{{ $name }}"
                class="vpm-auth-float__input @error($name) vpm-auth-float__input--error @enderror"
                placeholder=" "
                value="{{ old($name, $value) }}"
                @if ($required) required @endif
                @if ($autocomplete) autocomplete="{{ $autocomplete }}" @endif
                @if ($autofocus) autofocus @endif
                @if ($minlength) minlength="{{ $minlength }}" @endif
                @if ($maxlength) maxlength="{{ $maxlength }}" @endif
                @if ($min !== null) min="{{ $min }}" @endif
                @if ($max !== null) max="{{ $max }}" @endif
                @if ($step !== null) step="{{ $step }}" @endif
                @if ($hintId) aria-describedby="{{ $hintId }}" @endif
            >
            <label class="vpm-auth-float__label" for="{{ $fieldId }}">{{ $label }}</label>
        @endif
    </div>
    @if ($hint)
        <span id="{{ $hintId }}" class="vpm-auth-float__hint">{{ $hint }}</span>
    @endif
    @error($name)
        <span class="vpm-auth-float__error" role="alert">{{ $message }}</span>
    @enderror
</div>