@props(['title', 'subtitle' => null, 'section' => null])

@php
    // Lets the top bar know this page carries its own big title, so it does not repeat it.
    app()->instance('page-header-rendered', true);
@endphp

<div {{ $attributes->class(['flex flex-wrap items-end justify-between gap-4 mb-6']) }}>
    <div class="min-w-0">
        @if ($section)
            <div class="text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">{{ $section }}</div>
        @endif
        <h1 class="mt-1 text-2xl sm:text-[28px] leading-tight font-extrabold tracking-tight text-gray-900 dark:text-white">{{ $title }}</h1>
        @if ($subtitle)
            <p class="mt-1.5 text-sm text-gray-500 dark:text-gray-400 max-w-3xl">{{ $subtitle }}</p>
        @endif
    </div>

    @if ($slot->isNotEmpty())
        <div class="flex flex-wrap items-center gap-2">{{ $slot }}</div>
    @endif
</div>