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

<div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-3 flex-wrap mb-4">
    <div class="flex-fill">
        @if($title)
            <h1 class="h3 mb-1 fw-bold text-dark">{{ $title }}</h1>
        @endif
        @if(count($breadcrumbs) > 0 || $current)
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 small text-muted">
                    @foreach ($breadcrumbs as $item)
                        <li class="breadcrumb-item">
                            <a href="{{ $item['url'] ?? '#' }}" class="text-muted text-decoration-none">{{ $item['label'] ?? '' }}</a>
                        </li>
                    @endforeach
                    @if($current)
                        <li class="breadcrumb-item active" aria-current="page">{{ $current }}</li>
                    @endif
                </ol>
            </nav>
        @endif
    </div>
    @if(isset($slot) && trim($slot) !== '')
        <div class="ms-sm-auto">{{ $slot }}</div>
    @endif
</div>