@props([
    'title',
    'description' => null,
    'breadcrumbs' => [],
])

<header {{ $attributes->class(['mf-page-toolbar']) }} data-ui="page-toolbar">
    <div class="mf-page-toolbar-main">
        <div class="min-w-0">
            @if(count($breadcrumbs))
                <nav class="mf-breadcrumb" aria-label="Breadcrumb">
                    @foreach($breadcrumbs as $index => $crumb)
                        @if($index > 0)
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>
                        @endif
                        @if(!empty($crumb['url']) && $index < count($breadcrumbs) - 1)
                            <a href="{{ $crumb['url'] }}">{{ $crumb['label'] }}</a>
                        @else
                            <span @if($index === count($breadcrumbs) - 1) aria-current="page" @endif>{{ $crumb['label'] }}</span>
                        @endif
                    @endforeach
                </nav>
            @endif

            <h1 class="mf-page-title">{{ $title }}</h1>
            @if($description)
                <p class="mf-page-description">{{ $description }}</p>
            @endif
        </div>

        @isset($actions)
            <div class="mf-page-actions">{{ $actions }}</div>
        @endisset
    </div>
</header>
