Field code

@props([
    'label' => null,
    'for' => null,
    'hint' => null,
    'error' => null,
    'required' => false,
    'optional' => false,
])

@php
    /*
    | Form field wrapper: label + control slot + hint/error message. Pairs with
    | any of the ui form controls.
    |
    | Usage:
    |   <x-ui.field label="Email" for="email" :error="$errors->first('email')" required>
    |       <x-ui.input id="email" name="email" type="email" />
    |   </x-ui.field>
    */
@endphp

<div {{ $attributes->merge(['class' => 'space-y-1.5']) }}>
    @if ($label)
        <div class="flex items-center justify-between gap-2">
            <label @if($for) for="{{ $for }}" @endif class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                {{ $label }}
                @if ($required)
                    <span class="text-red-500">*</span>
                @endif
            </label>
            @if ($optional)
                <span class="text-xs text-gray-400 dark:text-gray-500">Optional</span>
            @endif
        </div>
    @endif

    {{ $slot }}

    @if ($error)
        <p class="flex items-center gap-1 text-sm text-red-600 dark:text-red-400">
            <x-ui.icon name="warning-circle" weight="fill" size="sm" />
            {{ $error }}
        </p>
    @elseif ($hint)
        <p class="text-sm text-gray-500 dark:text-gray-400">{{ $hint }}</p>
    @endif
</div>