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

<div class="mb-5 flex items-start justify-between gap-3 sm:mb-6 sm:items-center">
    <div>
        <h1 class="text-[1.75rem] font-bold tracking-tight sm:text-2xl">{{ $title }}</h1>
        @if ($subtitle)
            <p class="text-muted-foreground text-sm mt-0.5">{{ $subtitle }}</p>
        @endif
    </div>
    <div class="flex items-center gap-2">
        <button type="button" @click="$dispatch('toggle-search')" class="ios-transition-fast ios-press w-9 h-9 rounded-2xl bg-muted/60 flex items-center justify-center text-muted-foreground hover:text-foreground" aria-label="{{ __('budgets.top_bar.search_aria') }}">
            <i data-lucide="search" class="w-4 h-4"></i>
        </button>
        <button type="button" @click="$dispatch('toggle-notifications')" class="ios-transition-fast ios-press relative w-9 h-9 rounded-2xl bg-muted/60 flex items-center justify-center text-muted-foreground hover:text-foreground" aria-label="{{ __('budgets.top_bar.notifications_aria') }}">
            <i data-lucide="bell" class="w-4 h-4"></i>
            <span
                x-show="unreadCount > 0"
                x-cloak
                class="absolute -top-1 -right-1 flex h-4 min-w-[1rem] items-center justify-center rounded-full bg-expense px-0.5 text-[10px] font-bold text-primary-foreground"
                x-text="unreadCount > 99 ? '99+' : unreadCount"
            ></span>
        </button>
        @php
            $dn = trim((string) ($preferences['profile']['displayName'] ?? ''));
            if ($dn === '') {
                $dn = trim((string) (auth()->user()?->name ?? ''));
            }
            if ($dn === '') {
                $dn = (string) __('budgets.profile_page.title');
            }
            $parts = array_values(array_filter(preg_split('/\s+/', $dn) ?: []));
            $initials = strtoupper(
                ($parts[0][0] ?? 'U').($parts[1][0] ?? ($parts[0][1] ?? 'S'))
            );
        @endphp
        <a href="{{ route('settings') }}?section=account" wire:navigate class="ios-transition-fast ios-press flex h-9 w-9 items-center justify-center rounded-2xl bg-primary/10 text-xs font-semibold text-primary hover:bg-primary/20" title="{{ $dn }}">
            {{ $initials }}
        </a>
    </div>
</div>