{{-- Header Component --}}
<header class="vt-header">
    <!-- Sidebar Toggle -->
    <button type="button" class="vt-header-toggle" data-vt-toggle="sidebar" aria-label="Toggle sidebar">
        <i class="bi bi-list fs-5"></i>
    </button>

    <!-- Search -->
    @if(config('viartas-theme.header.search', true))
    <div class="vt-header-search">
        <i class="bi bi-search vt-header-search-icon"></i>
        <input type="text" class="vt-header-search-input" placeholder="Search anything...">
        <div class="vt-header-search-kbd">
            <kbd>⌘</kbd>
            <kbd>K</kbd>
        </div>
    </div>
    @endif

    <!-- Actions -->
    <div class="vt-header-actions">
        <!-- Theme Toggle -->
        <button type="button" class="vt-header-action" data-bs-toggle="tooltip" title="Toggle theme" onclick="ViartasTheme.toggleTheme()">
            <i class="bi bi-moon"></i>
        </button>

        <!-- Notifications -->
        @if(config('viartas-theme.header.notifications', true))
        <div class="vt-dropdown">
            <button type="button" class="vt-header-action" data-vt-toggle="dropdown">
                <i class="bi bi-bell"></i>
                <span class="vt-header-action-badge"></span>
            </button>
            <div class="vt-dropdown-menu" style="width: 360px; right: 0;">
                <div class="px-3 py-2 border-bottom">
                    <h6 class="mb-0 fw-semibold">Notifications</h6>
                </div>
                <div class="py-2" style="max-height: 320px; overflow-y: auto;">
                    <!-- Notification Items -->
                    <a href="#" class="vt-dropdown-item">
                        <div class="vt-stats-icon primary" style="width: 40px; height: 40px; font-size: 16px;">
                            <i class="bi bi-person-plus"></i>
                        </div>
                        <div>
                            <div class="fw-medium">New user registered</div>
                            <small class="text-muted">2 minutes ago</small>
                        </div>
                    </a>
                    <a href="#" class="vt-dropdown-item">
                        <div class="vt-stats-icon success" style="width: 40px; height: 40px; font-size: 16px;">
                            <i class="bi bi-cart-check"></i>
                        </div>
                        <div>
                            <div class="fw-medium">New order received</div>
                            <small class="text-muted">15 minutes ago</small>
                        </div>
                    </a>
                    <a href="#" class="vt-dropdown-item">
                        <div class="vt-stats-icon warning" style="width: 40px; height: 40px; font-size: 16px;">
                            <i class="bi bi-exclamation-triangle"></i>
                        </div>
                        <div>
                            <div class="fw-medium">Server CPU usage high</div>
                            <small class="text-muted">1 hour ago</small>
                        </div>
                    </a>
                </div>
                <div class="px-3 py-2 border-top">
                    <a href="#" class="text-primary text-decoration-none small fw-medium">View all notifications</a>
                </div>
            </div>
        </div>
        @endif

        <!-- Messages -->
        <div class="vt-dropdown">
            <button type="button" class="vt-header-action" data-vt-toggle="dropdown">
                <i class="bi bi-chat-dots"></i>
            </button>
            <div class="vt-dropdown-menu" style="width: 320px; right: 0;">
                <div class="px-3 py-2 border-bottom">
                    <h6 class="mb-0 fw-semibold">Messages</h6>
                </div>
                <div class="py-2">
                    <a href="#" class="vt-dropdown-item">
                        <div class="vt-sidebar-user-avatar" style="width: 36px; height: 36px; font-size: 12px;">JD</div>
                        <div class="flex-1 overflow-hidden">
                            <div class="fw-medium text-truncate">John Doe</div>
                            <small class="text-muted text-truncate d-block">Hey, can you check the report?</small>
                        </div>
                    </a>
                </div>
                <div class="px-3 py-2 border-top">
                    <a href="#" class="text-primary text-decoration-none small fw-medium">View all messages</a>
                </div>
            </div>
        </div>

        <!-- User Menu -->
        @if(config('viartas-theme.header.user_dropdown', true))
        <div class="vt-dropdown">
            <button type="button" class="vt-header-user" data-vt-toggle="dropdown">
                <div class="vt-header-user-avatar">
                    {{ auth()->check() ? strtoupper(substr(auth()->user()->name ?? 'U', 0, 2)) : 'AD' }}
                </div>
                <span class="vt-header-user-name">{{ auth()->user()->name ?? 'Admin User' }}</span>
                <i class="bi bi-chevron-down vt-header-user-chevron"></i>
            </button>
            <div class="vt-dropdown-menu">
                <a href="#" class="vt-dropdown-item">
                    <i class="bi bi-person"></i>
                    <span>My Profile</span>
                </a>
                <a href="#" class="vt-dropdown-item">
                    <i class="bi bi-gear"></i>
                    <span>Settings</span>
                </a>
                <a href="#" class="vt-dropdown-item">
                    <i class="bi bi-question-circle"></i>
                    <span>Help Center</span>
                </a>
                <div class="vt-dropdown-divider"></div>
                <form method="POST" action="{{ route(\ViartasCore\Core\Facades\Viartas::driver()->app()->logout()) }}">
                    @csrf
                    <button type="submit" class="vt-dropdown-item text-danger">
                        <i class="bi bi-box-arrow-right"></i>
                        <span>Sign Out</span>
                    </button>
                </form>
            </div>
        </div>
        @endif
    </div>
</header>
