@props([
    'pageTitle',
    'pageCaption'
])

<div class="block">
    <div class="bg-bg-pr/80 backdrop-blur-sm sticky top-0 mb-8 pt-6 z-50">
        <div class="flex justify-center px-12">
            <div class="flex-1 max-w-5xl">
                <div class="flex">
                    <div class="flex-1">
                        @if(isset($pageTitle))
                            <div class="mb-6">
                                <h1 class="text-title-2 text-lab-pr font-semibold tracking-tighter">
                                    {{ $pageTitle }}
                                </h1>
                                @if(isset($pageCaption))
                                    <p class="text-par-s text-lab-pr2 max-w-lg">{!! $pageCaption !!}</p>
                                @endif
                            </div>
                        @endif
                    </div>
        
                    @if(isset($pageControls))
                        <div class="flex-shrink-0">
                            {{ $pageControls }}
                        </div>
                    @endif
                </div>
            </div>
        </div>

        @if(isset($pageTabs))
            <div class="border-b border-b-fill-pr px-12">
                <div class="flex justify-center">
                    <div class="flex-1 max-w-5xl">
                        {{ $pageTabs }}
                    </div>
                </div>
            </div>
        @endif
    </div>
    <div class="px-12">
        <div class="flex justify-center">
            <div class="flex-1 max-w-5xl">
                {{ $slot }}
            </div>
        </div>
    </div>
</div>