<header class="header">
    <div class="header-left">
        <a href="{{ Route::has('dashboard') ? route('dashboard') : '#' }}" class="header-logo">
            <img src="{{ asset('assets/img/logo.webp') }}" alt="{{ config('app.name') }}">
            <span>{{ config('app.name', 'Admin') }}</span>
        </a>
        <button class="sidebar-toggle" title="Toggle Sidebar" type="button">
            <i class="bi bi-list"></i>
        </button>
    </div>

    <div class="header-search d-none d-md-block">
        <form class="search-form" action="#" method="GET">
            <i class="bi bi-search search-icon"></i>
            <input type="search" name="q" placeholder="Search anything..." autocomplete="off">
            <kbd class="search-shortcut d-none d-lg-inline-flex"><span>&#8984;</span>K</kbd>
        </form>
    </div>

    <div class="header-right">
        <div class="header-actions-desktop d-none d-md-flex">
            <button class="header-action theme-toggle" title="Toggle Theme" type="button">
                <i class="bi bi-moon icon-dark"></i>
                <i class="bi bi-sun icon-light"></i>
            </button>

            <span class="header-divider"></span>

            <div class="header-action-wrap dropdown user-dropdown">
                <button class="dropdown-toggle user-trigger" data-bs-toggle="dropdown" aria-expanded="false" type="button">
                    <img src="{{ asset('assets/img/profile-img.webp') }}" alt="User" class="user-avatar">
                    <div class="user-brief d-none d-lg-block">
                        <span class="user-name">{{ auth()->user()->name ?? 'Admin' }}</span>
                        <span class="user-role">{{ auth()->user()?->roles?->first()?->name ?? 'Administrator' }}</span>
                    </div>
                    <i class="bi bi-chevron-down user-chevron"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end user-menu">
                    <div class="user-menu-header">
                        <img src="{{ asset('assets/img/profile-img.webp') }}" alt="User" class="user-menu-avatar">
                        <div class="user-menu-info">
                            <div class="user-menu-name">{{ auth()->user()->name ?? 'Admin' }}</div>
                            <div class="user-menu-email">{{ auth()->user()->email ?? '' }}</div>
                        </div>
                    </div>
                    <div class="user-menu-body">
                        @if (Route::has('profile.edit'))
                            <a class="user-menu-item" href="{{ route('profile.edit') }}">
                                <span class="user-menu-icon"><i class="bi bi-person"></i></span>
                                <span>My Profile</span>
                            </a>
                        @endif
                        @if (Route::has('settings.index'))
                            <a class="user-menu-item" href="{{ route('settings.index') }}">
                                <span class="user-menu-icon"><i class="bi bi-gear"></i></span>
                                <span>Settings</span>
                            </a>
                        @endif
                        @if (Route::has('audit-logs.index'))
                            <a class="user-menu-item" href="{{ route('audit-logs.index') }}">
                                <span class="user-menu-icon"><i class="bi bi-activity"></i></span>
                                <span>Activity Log</span>
                            </a>
                        @endif
                    </div>
                    <div class="user-menu-footer">
                        @if (Route::has('logout'))
                            <form action="{{ route('logout') }}" method="POST">
                                @csrf
                                <button type="submit" class="user-menu-logout w-100 border-0 bg-transparent">
                                    <i class="bi bi-box-arrow-right"></i>
                                    <span>Sign Out</span>
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="header-actions-mobile d-flex d-md-none">
            <button class="header-action search-toggle" title="Search" type="button">
                <i class="bi bi-search"></i>
            </button>
            <button class="header-action mobile-menu-toggle" title="More" type="button">
                <i class="bi bi-three-dots-vertical"></i>
            </button>
        </div>
    </div>
</header>

<div class="mobile-search d-md-none">
    <form class="search-form" action="#" method="GET">
        <input type="search" name="q" placeholder="Search..." autocomplete="off">
        <button type="submit"><i class="bi bi-search"></i></button>
    </form>
</div>
