{{-- The chrome of M3's text fields, around whichever control is in the slot.

     Not used at call sites: `<x-input>`, `<x-password>`, `<x-textarea>`, `<x-select>`, `<x-file>`
     and the pickers wrap their control in it, so a form reads as one family. The states — the
     label resting or floating, the notch, focus, disabled, required — are selectors in
     resources/css/components/field.css, which explains the anatomy; the only state this file
     decides is `data-invalid`, because only the server knows that.

     `variant` is M3's two: `outlined` (a notched outline) and `filled` (a surface-container-highest
     box with an indicator line); without it, `config('livewire-material.fields.variant')`. A field
     with a label is a form field, M3's 56px. A field without one is a control in a toolbar or an
     editor row, and is given `size="sm"` (40px, a button's height) or `size="xs"` (32px). The
     error replaces the hint rather than stacking under it, as M3 has it.

     `class` from the call site lands on the outermost element, never the control, so a margin or
     a width is safe here. --}}

@props([
    'id',
    'label' => null,
    'hint' => null,
    'hintClass' => null,
    'messages' => [],
    'icon' => null,
    'prefix' => null,
    'suffix' => null,
    'size' => 'md',
    'variant' => null,
    'floated' => false,
    'mono' => false,
])

@php
    $variant = in_array($variant, ['outlined', 'filled'], true)
        ? $variant
        : (config('livewire-material.fields.variant') === 'filled' ? 'filled' : 'outlined');
@endphp

<div
    {{ $attributes->class(['field']) }}
    data-variant="{{ $variant }}"
    data-size="{{ in_array($size, ['sm', 'xs'], true) ? $size : 'md' }}"
    @if ($messages !== []) data-invalid @endif
    @if ($floated) data-floated @endif
    @if ($mono) data-mono @endif
>
    <div class="field-box">
        @if ($icon)
            <x-icon :name="$icon" class="field-icon size-(--field-icon)" />
        @endif

        @if (filled($prefix))
            <span class="field-affix">{{ $prefix }}</span>
        @endif

        {{ $slot }}

        @if (filled($suffix))
            <span class="field-affix">{{ $suffix }}</span>
        @endif

        {{ $trailing ?? '' }}

        <fieldset aria-hidden="true" class="field-outline">
            <legend>@if (filled($label))<span>{{ $label }}</span>@endif</legend>
        </fieldset>

        @if (filled($label))
            <label for="{{ $id }}" class="field-label">{{ $label }}</label>
        @endif
    </div>

    @if ($messages !== [])
        <div id="{{ $id }}-support" class="field-support" role="alert">
            @foreach ($messages as $message)
                <p>{{ $message }}</p>
            @endforeach
        </div>
    @elseif (filled($hint))
        <p id="{{ $id }}-support" @class(array_filter(['field-support', $hintClass]))>{{ $hint }}</p>
    @endif
</div>