@props([
    'id',
    'label' => null,
    'hint' => null,
    'error' => null,
    'required' => false,
    'disabled' => false,
    'loading' => false,
    'wide' => false,
])

<div
    {{ $attributes->class([
        'ui-form-field',
        'ui-form-field--wide' => $wide,
        'is-invalid' => filled($error),
        'is-disabled' => $disabled,
        'is-loading' => $loading,
    ]) }}
    data-ui-form-field
    @if ($loading) aria-busy="true" @endif
>
    @if (filled($label))
        <label class="ui-form-field__label" for="{{ $id }}">
            <span>{{ $label }}</span>
            @if ($required)
                <span class="ui-form-field__required" aria-hidden="true">*</span>
                <span class="ui-visually-hidden"> {{ __('kview-ui-core::ui.required') }}</span>
            @endif
        </label>
    @endif

    <div class="ui-form-field__control">
        {{ $slot }}
    </div>

    @if (filled($hint))
        <p id="{{ $id }}_hint" class="ui-form-field__hint">{{ $hint }}</p>
    @endif

    @if (filled($error))
        <p id="{{ $id }}_error" class="ui-form-field__error" role="alert">{{ $error }}</p>
    @endif
</div>