{{-- A form: its fields in one column, and its actions at the foot.

     `gap-4` between fields, because a text field floats its label half above its outline: any less
     and the hint under one field runs into the label of the next. The `actions` slot takes a class
     of its own; `separator` draws a divider above it.

     `grid-cols-1`, because a bare `grid` has no columns and its implicit one floors at the
     content's min-content: on a phone a wide field would push the form past its column. --}}

@props([
    'separator' => false,
])

<form {{ $attributes->class(['grid grid-cols-1 auto-rows-min gap-4']) }}>
    {{ $slot }}

    @isset($actions)
        @if ($separator)
            <x-divider />
        @endif

        <div {{ $actions->attributes->class(['flex flex-wrap items-center justify-end gap-2']) }}>
            {{ $actions }}
        </div>
    @endisset
</form>