<header class="app-topbar px-3 py-2 d-flex align-items-center justify-content-between">
    <div class="d-flex align-items-center gap-2">
        <button class="btn btn-outline-secondary d-lg-none" id="sidebarToggle" type="button"><i class="bi bi-list"></i></button>
        <nav aria-label="breadcrumb" class="d-none d-md-block">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">{{ __('nav.dashboard') }}</a></li>
                <li class="breadcrumb-item active">@yield('title')</li>
            </ol>
        </nav>
    </div>
    <div class="d-flex align-items-center gap-2">
        @can('search.view')
        <form action="{{ route('search') }}" class="d-none d-md-flex">
            <input class="form-control form-control-sm" name="q" placeholder="{{ __('messages.search') }}" value="{{ request('q') }}">
        </form>
        @endcan
        <div class="btn-group btn-group-sm">
            <a class="btn btn-outline-secondary {{ app()->getLocale()==='ar' ? 'active' : '' }}" href="{{ route('language.switch', 'ar') }}">{{ __('messages.arabic') }}</a>
            <a class="btn btn-outline-secondary {{ app()->getLocale()==='en' ? 'active' : '' }}" href="{{ route('language.switch', 'en') }}">{{ __('messages.english') }}</a>
        </div>
        <span class="small text-muted">v{{ app_version() }}</span>
        <div class="dropdown">
            <button class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown">{{ auth()->user()->name }}</button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li>
                    <form method="post" action="{{ route('logout') }}">@csrf
                        <button class="dropdown-item">{{ __('messages.logout') }}</button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</header>
