@props([
    'name'       => '',
    'label'      => '',
    'type'       => 'text',
    'value'      => '',
    'placeholder'=> '',
    'required'   => false,
    'hint'       => null,
    'error'      => null,
    'id'         => null,
    'autofocus'  => false,
    'autocomplete' => null,
    'inputmode'  => null,
])

@php
    $inputId = $id ?? 'in-'.\Illuminate\Support\Str::slug($name ?: uniqid('field-', true));
    $hasError = $error !== null && $error !== '';
@endphp

<div class="dc-form-group">
    @if ($label)
        <label class="dc-label {{ $required ? 'dc-label__required' : '' }}" for="{{ $inputId }}">
            {{ $label }}
        </label>
    @endif

    <input {{ $attributes->merge([
        'class'   => 'dc-input',
        'id'      => $inputId,
        'name'    => $name,
        'type'    => $type,
        'value'   => (string) $value,
        'placeholder' => $placeholder,
        'aria-invalid' => $hasError ? 'true' : 'false',
        'aria-describedby' => $hasError ? $inputId.'-error' : ($hint ? $inputId.'-hint' : null),
    ]) }}
    @if ($required) required @endif
    @if ($autofocus) autofocus @endif
    @if ($autocomplete) autocomplete="{{ $autocomplete }}" @endif
    @if ($inputmode) inputmode="{{ $inputmode }}" @endif
    >

    @if ($hasError)
        <div id="{{ $inputId }}-error" class="dc-error">{{ $error }}</div>
    @elseif ($hint)
        <div id="{{ $inputId }}-hint" class="dc-hint">{{ $hint }}</div>
    @endif
</div>