{{-- M3 Expressive's toolbar: a set of actions for the current page, in a bar of its own.

     `variant`: `floating` (the default: a pill at elevation 3; `vibrant` in primary-container,
     `vertical` stands it on end) or `docked` (a full-width bar in surface-container, for the bottom
     of a screen). `place` puts it over the page: `bottom` (centred above the bottom edge; a docked
     toolbar spans it) or `end` (centred against the end edge, for a vertical one); without it the
     toolbar sits where it is written. A `fab` slot sets an `<x-fab>` beside a floating toolbar.
     `label` names it for screen readers.

     Put `<x-button icon="…" tooltip="…" />` controls in the slot (`:selected` for toggles). It is a
     `role="toolbar"`: the arrow keys move between its controls (resources/js/toolbar.js,
     resources/css/components/toolbar.css). --}}

@props([
    'variant' => 'floating',
    'vibrant' => false,
    'vertical' => false,
    'place' => null,
    'label' => null,
])

@php
    $variant = $variant === 'docked' ? 'docked' : 'floating';
    $vertical = $vertical && $variant === 'floating';
    $place = in_array($place, ['bottom', 'end'], true) ? $place : null;
    $grouped = isset($fab) && $variant === 'floating';
@endphp

@if ($grouped)
    <div data-toolbar-group @if ($vertical) data-vertical @endif @if ($place) data-toolbar-place="{{ $place }}" @endif>
@endif

<div
    role="toolbar"
    x-data="materialToolbar({{ $vertical ? 'true' : 'false' }})"
    x-on:keydown="move($event)"
    data-toolbar
    data-variant="{{ $variant }}"
    @if ($vertical) data-vertical aria-orientation="vertical" @endif
    @if ($vibrant && $variant === 'floating') data-vibrant @endif
    @if ($place && ! $grouped) data-toolbar-place="{{ $place }}" @endif
    @if (filled($label)) aria-label="{{ $label }}" @endif
    {{ $attributes }}
>
    {{ $slot }}
</div>

@if ($grouped)
        {{ $fab }}
    </div>
@endif