@once
    <style>
        .auth_header_actions { display: inline-flex; align-items: center; gap: 8px; }
        .auth_header_logout { color: #fff !important; background: rgba(220, 53, 69, .95) !important; }
        .auth_header_logout:hover, .float_menu_logout:hover { background: #dc3545 !important; }
        .float_menu .user_btn { display: flex; gap: 8px; flex-wrap: wrap; }
        .float_menu_logout { background: rgba(220, 53, 69, .95) !important; }
    </style>
@endonce

@php
    $notificationsReady = auth()->check() && \Illuminate\Support\Facades\Schema::hasTable('notifications');
    $headerNotifications = $notificationsReady
        ? \App\Models\Notification::query()->where('user_id', auth()->id())->latest()->limit(6)->get()
        : collect();
    $headerUnreadNotifications = $notificationsReady
        ? \App\Models\Notification::query()->where('user_id', auth()->id())->whereNull('read_at')->count()
        : 0;
@endphp

<header id="navbar" class="header header_style_2 header-single header-single clearfix">
    <div class="container d-flex space-bet">
        <div class="mobile_menu_icon"><i class="fa-regular fa-bars"></i></div>
        <div class="mobile_search_icon">
            <a class="mobile_notif_icon" href="{{ localized_route('notifications.index') }}">
                <i class="fa-regular fa-bell"></i><span class="count_mobile">{{ $headerUnreadNotifications }}</span>
            </a>
        </div>

        <div class="logo">
            <a href="{{ localized_route('home') }}">
                <img width="40" height="40" src="{{ url('/') }}/assets/images/logo.png" alt="logo" class="logo_img"/>
                <span>{{ setting('site_name') }}</span>
            </a>
        </div>

        <nav class="top_nav">
            <ul class="menunav">
                <li class="menu-item"><a href="{{ localized_route('home') }}">{{ __('Home') }}</a></li>
                <li class="menu-item"><a href="{{ localized_route('blog.index') }}">{{ __('Blog') }}</a></li>
                @auth
                    <li class="menu-item"><a href="{{ localized_route('user.live.index') }}">{{ __('Live streams') }}</a></li>
                    <li class="menu-item"><a href="{{ localized_route('user.wallet') }}">{{ __('Wallet') }}</a></li>
                @endauth
                <li class="menu-item"><a href="{{ localized_route('about_us') }}">{{ __('About us') }}</a></li>
            </ul>
        </nav>

        <div class="go-left">
            <div class="login_register">
                <button data-bs-custom-class="panel-tooltip" data-bs-toggle="tooltip" data-bs-placement="bottom" title="{{ __('Notifications') }}" class="panel_button notification_btn">
                    <i class="fa fa-bell"></i><span class="count">{{ $headerUnreadNotifications }}</span>
                </button>
                <div class="notif_items">
                    <ul>
                        @foreach($headerNotifications as $notification)
                            <li class="{{ $notification->read_at ? '' : 'unread' }}">
                                <a href="{{ localized_route('notifications.read', $notification->id) }}">
                                    <strong>{{ $notification->title }}</strong>
                                    @if($notification->body)<small>{{ \Illuminate\Support\Str::limit($notification->body, 70) }}</small>@endif
                                </a>
                            </li>
                        @endforeach
                    </ul>
                    <div class="notif_notfound" style="{{ $headerNotifications->isNotEmpty() ? 'display:none;' : '' }}">{{ __('No new notifications.') }}</div>
                    <a class="show_all_notifs" href="{{ localized_route('notifications.index') }}">{{ __('View all notifications') }}</a>
                </div>
            </div>

            <div class="login_register">
                @auth
                    <div class="auth_header_actions">
                        <a class="panel_button wide" href="{{ localized_route('user.dashboard') }}">{{ __('Dashboard') }}</a>
                        <a class="panel_button wide auth_header_logout" href="{{ localized_route('logout') }}">{{ __('Logout') }}</a>
                    </div>
                @else
                    <a class="panel_button wide" href="{{ localized_route('login') }}">{{ __('Login / Register') }}</a>
                @endauth
            </div>
        </div>
    </div>
</header>

<div class="float_menu_holder"></div>
<div class="float_menu">
    <div class="logo"><a href="{{ localized_route('home') }}"><img src="{{ url('/') }}/assets/images/logo.png" alt="logo" class="logo_img"/><span>{{ setting('site_name') }}</span></a></div>
    <ul class="menunav">
        <li class="menu-item"><a href="{{ localized_route('home') }}">{{ __('Home') }}</a></li>
        <li class="menu-item"><a href="{{ localized_route('blog.index') }}">{{ __('Blog') }}</a></li>
        @auth
            <li class="menu-item"><a href="{{ localized_route('user.live.index') }}">{{ __('Live streams') }}</a></li>
            <li class="menu-item"><a href="{{ localized_route('user.wallet') }}">{{ __('Wallet') }}</a></li>
        @endauth
        <li class="menu-item"><a href="{{ localized_route('about_us') }}">{{ __('About us') }}</a></li>
    </ul>
    <div class="d-flex py-2 float_menu__cta">
        <div class="user_btn">
            @auth
                <a href="{{ localized_route('user.dashboard') }}">{{ __('Dashboard') }}</a>
                <a class="float_menu_logout" href="{{ localized_route('logout') }}">{{ __('Logout') }}</a>
            @else
                <a href="{{ localized_route('login') }}">{{ __('Login') }}</a>
                <a href="{{ localized_route('register') }}">{{ __('Register') }}</a>
            @endauth
        </div>
    </div>
</div>

<button aria-label="go up" class="go_top"><i class="fa fa-chevron-up"></i></button>