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

@php
    $hasError = $name && $errors->has($name);
@endphp

<div {{ $attributes->merge(['class' => 'field'.($span ? ' col-'.$span : '')]) }}>
    @if ($label)
        <label class="field__label" @if ($name) for="{{ $name }}" @endif>
            {{ $label }}
            @if ($required)
                <span class="field__required" aria-hidden="true">*</span>
                <span class="u-visually-hidden">(required)</span>
            @endif
        </label>
    @endif

    {{ $slot }}

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

    @if ($hasError)
        <p class="field__error" id="{{ $name }}-error">
            <i class="fa-solid fa-circle-exclamation" aria-hidden="true"></i>
            <span>{{ $errors->first($name) }}</span>
        </p>
    @endif
</div>