{{-- A checkbox, M3's: an 18px box that fills with primary when ticked, in a 40px state layer. The
     tick and the dash fill the box at CheckboxTokens' 18px icon size, drawn from the 20 optical cut.

     The label and its hint sit beside it and are its accessible name — the whole row is the
     `<label>`, so either can be pressed. `right` puts the box at the end of the row, for a setting
     read left to right. `indeterminate` shows the mixed state of a "select all" whose items are
     partly ticked: HTML has no attribute for it, so the input is marked `data-md-indeterminate` and
     resources/js/field.js keeps the property in step, on load and after every morph. Errors are
     read from the bag under the `wire:model` name. Every other attribute reaches the `<input>`.
     The drawing is resources/css/components/checkbox.css, on the row the three selection controls
     share (resources/css/components/selection.css).

     Without a label — a "select all" in a table header, a row's tick — the row is only the 18px box,
     so the box carries `md-touch-target` and catches presses over M3's 48px minimum.

     Grouping is the caller's, not this component's: M3 asks that from `expanded` (840px) a set of
     related checkboxes be gathered into a contained region rather than left as one long column
     (docs/reference/m3/components-navigation-selection-inputs.md § Checkbox, Behaviour). Lay the
     group out yourself — a grid of one column that takes two from `expanded`, or an `<x-card>` or
     side sheet holding them — and give the group a heading that names what it asks. --}}

@props([
    'label' => null,
    'hint' => null,
    'right' => false,
    'indeterminate' => false,
])

@php
    $model = $attributes->whereStartsWith('wire:model')->first();
    $id = $attributes->get('id') ?? 'check-'.substr(md5($model.'|'.$label.'|'.$attributes->get('value')), 0, 12);
    // A plain form's field is named, not bound: its errors are under its name (`files[]` → `files`, `a[b]` → `a.b`).
    $errorKey = $model ?? (filled($attributes->get('name')) ? str_replace(['[]', '[', ']'], ['', '.', ''], (string) $attributes->get('name')) : null);
    $messages = $errorKey !== null && isset($errors) ? \Illuminate\Support\Arr::flatten($errors->get($errorKey)) : [];
@endphp

<div data-md-checkbox {{ $attributes->only(['class', 'style', 'wire:key']) }}>
    <label for="{{ $id }}" data-md-selection-row @if ($right) data-md-right @endif @if ($messages !== []) data-md-invalid @endif>
        <span data-md-checkbox-box @if (blank($label) && blank($hint)) class="md-touch-target" @endif>
            <input
                {{ $attributes->except(['class', 'style', 'id', 'wire:key']) }}
                id="{{ $id }}"
                type="checkbox"
                @if ($indeterminate) data-md-indeterminate @endif
                @if ($messages !== []) aria-invalid="true" aria-describedby="{{ $id }}-support" @endif
            />
            <x-livewire-material::icon name="check" size="18" data-md-checkbox-check />
            <x-livewire-material::icon name="remove" size="18" data-md-checkbox-mixed />
        </span>

        @if (filled($label) || filled($hint))
            <span data-md-selection-text>
                @if (filled($label))
                    <span data-md-selection-label>{{ $label }}</span>
                @endif
                @if (filled($hint))
                    <span data-md-selection-hint>{{ $hint }}</span>
                @endif
            </span>
        @endif
    </label>

    @if ($messages !== [])
        <div id="{{ $id }}-support" data-md-selection-support role="alert">
            @foreach ($messages as $message)
                <p>{{ $message }}</p>
            @endforeach
        </div>
    @endif
</div>