<!-- Header -->
<header class="yt-header">
    <div class="yt-header-left">
        <button class="yt-menu-btn" onclick="toggleSidebar()">
            <i class="bi bi-list fs-5"></i>
        </button>
        <a href="{{ route('home') }}" class="yt-logo">
            <img src="{{ asset('storage/images/logo.png') }}"       alt="{{ config('app.name') }}" class="d-md-none"    style="height:30px;">
            <img src="{{ asset('storage/images/fullLogo.png') }}"   alt="{{ config('app.name') }}" class="d-none d-md-block" style="height:30px;">
        </a>
    </div>

    <div class="yt-header-center d-none d-md-flex">
        <div class="yt-search">
            <form action="{{ route('videos.search') }}" method="GET" class="yt-search-form">
                <input type="text" name="q" class="yt-search-input" placeholder="Search" value="{{ request('q') }}">
                <button type="submit" class="yt-search-btn"><i class="bi bi-search"></i></button>
            </form>
        </div>
    </div>

    <div class="yt-header-right">
        <!-- Mobile search -->
        <button type="button" class="yt-icon-btn d-md-none" onclick="toggleMobileSearch()">
            <i class="bi bi-search"></i>
        </button>

        @auth
            <!-- Create / Upload -->
            <button type="button" class="yt-upload-btn d-none d-md-flex"
                    onclick="openUploadChooser()">
                <i class="bi bi-camera-video-fill"></i>
                <span>Create</span>
            </button>

            <!-- Notifications -->
            <div class="yt-notif-wrap" id="notifWrap">
                <button type="button" class="yt-icon-btn" id="notifBtn"
                        onclick="toggleNotifPanel()" title="Notifications" aria-expanded="false">
                    <i class="bi bi-bell-fill"></i>
                    <span class="yt-notif-badge" id="notifBadge" style="display:none;"></span>
                </button>

                <div class="yt-notif-panel" id="notifPanel" style="display:none;" role="menu">
                    <div class="yt-notif-header">
                        <span class="yt-notif-title">Notifications</span>
                        <button type="button" class="yt-notif-mark-all" id="notifMarkAll"
                                onclick="markAllRead()" style="display:none;">Mark all read</button>
                    </div>
                    <div class="yt-notif-list" id="notifList">
                        <div class="yt-notif-empty">Loading…</div>
                    </div>
                </div>
            </div>

            <!-- User dropdown -->
            <div class="yt-user-dropdown" id="headerUserDropdown">
                <button class="yt-icon-btn" id="headerUserBtn"
                        onclick="toggleHeaderDropdown()" aria-expanded="false" aria-haspopup="true">
                    <img src="{{ Auth::user()->avatar_url }}"
                         class="yt-user-avatar" alt="{{ Auth::user()->name }}">
                </button>

                <div class="yt-user-panel" id="headerUserPanel" role="menu">
                    <div class="yt-panel-info">
                        <img src="{{ Auth::user()->avatar_url }}" alt="{{ Auth::user()->name }}">
                        <div style="min-width:0;">
                            <div class="yt-panel-name">{{ Auth::user()->name }}</div>
                            <div class="yt-panel-email">{{ Auth::user()->email }}</div>
                        </div>
                    </div>
                    <div class="yt-panel-links">
                        @if(Auth::user()->isSuperAdmin())
                        <a href="{{ route('admin.dashboard') }}" class="yt-drop-item">
                            <i class="bi bi-speedometer2"></i> Admin Dashboard
                        </a>
                        <div class="yt-panel-divider"></div>
                        @endif
                        <a href="{{ route('channel', Auth::user()->channel) }}" class="yt-drop-item">
                            <i class="bi bi-person-video3"></i> My Channel
                        </a>
                        <a href="{{ route('channel', Auth::user()->channel) }}#settings" class="yt-drop-item">
                            <i class="bi bi-gear"></i> Settings
                        </a>
                        <div class="yt-panel-divider"></div>
                        <form method="POST" action="{{ route('logout') }}" style="margin:0;">
                            @csrf
                            <button type="submit" class="yt-drop-item danger">
                                <i class="bi bi-box-arrow-right"></i> Sign Out
                            </button>
                        </form>
                    </div>
                </div>
            </div>

        @else
            <a href="{{ route('login') }}" class="yt-upload-btn">
                <i class="bi bi-box-arrow-in-right"></i>
                <span>Sign In</span>
            </a>
        @endauth
    </div>
</header>
