@props(['title', 'breadcrumbs' => null])
<div class="flex flex-col gap-y-6 py-8">
    <div class="w-full sm:flex items-end justify-between">
        <header class="fi-header">
            @if($breadcrumbs)
                <x-breadcrumbs :breadcrumbs="$this->breadcrumbs"/>
            @endif
            <h1 class="fi-header-heading text-2xl font-bold tracking-tight text-gray-950 dark:text-white sm:text-3xl">
                {{ $title }}
            </h1>
        </header>

        @isset($headerActions)
            <div {{ $headerActions->attributes->merge(['class' => 'max-sm:mt-4']) }}>
                {{ $headerActions }}
            </div>
        @endisset
    </div>

    <div class="">
        {{ $slot }}
    </div>
</div>