@php
    $user = auth()->user();
    $isAdminArea = ($area ?? 'user') === 'admin';
    $notificationsRoute = $isAdminArea ? route('admin.notifications') : route('app.notifications');
    $notificationsLabel = $isAdminArea ? 'Admin notifications' : 'Notifications';
@endphp

<header class="vpm-dash-header">
    <button type="button" class="vpm-dash-header__menu vpm-icon-btn" aria-label="Open navigation" data-dash-toggle>
        <span class="material-symbols-outlined" aria-hidden="true">menu</span>
    </button>

    <div class="vpm-dash-header__title">
        <h1 class="vpm-dash-header__heading">@yield('page_title', 'Dashboard')</h1>
        @hasSection('page_subtitle')
            <p class="vpm-dash-header__sub">@yield('page_subtitle')</p>
        @endif
    </div>

    <div class="vpm-dash-header__actions">
        @if (($area ?? 'user') !== 'admin')
            <div class="vpm-balance-pill" title="Account balance">
                <span class="vpm-balance-pill__label">Balance</span>
                <span class="vpm-num vpm-balance-pill__value" data-vpm-account-balance>{{ auth()->user()->formattedBalance() }} {{ $vpmCurrency ?? 'USDT' }}</span>
            </div>
            <x-vpm.button variant="primary" class="vpm-btn--sm" href="{{ route('app.fund') }}">Deposit</x-vpm.button>
        @endif
        <x-vpm.theme-toggle />
        <a href="{{ $notificationsRoute }}" class="vpm-icon-btn" aria-label="{{ $notificationsLabel }}">
            <span class="material-symbols-outlined" aria-hidden="true">notifications</span>
        </a>
        <a href="{{ route('app.account') }}" class="vpm-avatar vpm-avatar--sm vpm-avatar--link" title="{{ $user->name }}" aria-label="Account settings for {{ $user->name }}">
            @if ($user->profilePhotoUrl())
                <img src="{{ $user->profilePhotoUrl() }}" alt="" class="vpm-avatar__img">
            @else
                {{ $user->initials() }}
            @endif
        </a>
    </div>
</header>