@php
    $user = auth()->user();
    $locales = config('app.available_locales', []);
    $currentLocale = app()->getLocale();
    $avatar = $user?->photo ? asset('storage/' . $user->photo) : asset('assetss/images/users/avatar-1.jpg');
@endphp
<header class="topbar">
    <div class="container-fluid">
        <div class="navbar-header">
            <div class="d-flex align-items-center gap-2">
                <div class="topbar-item">
                    <button type="button" class="button-toggle-menu topbar-button">
                        <iconify-icon icon="solar:hamburger-menu-broken" class="fs-24 align-middle"></iconify-icon>
                    </button>
                </div>
                <form class="app-search d-none d-md-block me-auto" action="javascript:void(0)">
                    <div class="position-relative">
                        <input type="search" class="form-control" placeholder="{{ __('admin.search') }}..."
                            autocomplete="off">
                        <iconify-icon icon="solar:magnifer-broken" class="search-widget-icon"></iconify-icon>
                    </div>
                </form>
            </div>

            <div class="d-flex align-items-center gap-1">
                <div class="dropdown topbar-item">
                    <button type="button" class="topbar-button" data-bs-toggle="dropdown" aria-expanded="false">
                        <iconify-icon icon="solar:global-broken" class="fs-22 align-middle"></iconify-icon>
                    </button>
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            {{ __('admin.language') }}
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ route('locale.switch', 'ps') }}">پښتو</a></li>
                            <li><a class="dropdown-item" href="{{ route('locale.switch', 'fa') }}">دری</a></li>
                            <li><a class="dropdown-item" href="{{ route('locale.switch', 'en') }}">{{ __('admin.english') }}</a></li>
                        </ul>
                    </div>
                </div>

                <div class="topbar-item">
                    <button type="button" class="topbar-button" id="light-dark-mode">
                        <iconify-icon icon="solar:moon-broken" class="fs-24 align-middle light-mode"></iconify-icon>
                        <iconify-icon icon="solar:sun-broken" class="fs-24 align-middle dark-mode"></iconify-icon>
                    </button>
                </div>

                <div class="dropdown topbar-item d-none d-lg-flex">
                    <button type="button" class="topbar-button" data-toggle="fullscreen">
                        <iconify-icon icon="solar:full-screen-broken"
                            class="fs-24 align-middle fullscreen"></iconify-icon>
                        <iconify-icon icon="solar:quit-full-screen-broken"
                            class="fs-24 align-middle quit-fullscreen"></iconify-icon>
                    </button>
                </div>

                <div class="topbar-item d-none d-md-flex">
                    <button type="button" class="topbar-button" id="theme-settings-btn" data-bs-toggle="offcanvas"
                        data-bs-target="#theme-settings-offcanvas">
                        <iconify-icon icon="solar:settings-broken" class="fs-24 align-middle"></iconify-icon>
                    </button>
                </div>

                <div class="dropdown topbar-item">
                    <button type="button" class="topbar-button d-flex align-items-center gap-2"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <img src="{{ $avatar }}" class="rounded-circle border"
                            style="width:36px;height:36px;object-fit:cover;" alt="user">
                        <span class="d-none d-md-inline text-start">
                            <span class="d-block fw-semibold" style="line-height:1;">{{ $user?->name ?? 'User' }}</span>
                            <small class="d-block text-muted"
                                style="line-height:1;">{{ ucfirst($user?->getRoleNames()->first() ?? 'Admin') }}</small>
                        </span>
                        <iconify-icon icon="solar:alt-arrow-down-broken" class="fs-18 align-middle ms-1"></iconify-icon>
                    </button>
                    <div class="dropdown-menu dropdown-menu-end">
                        <h6 class="dropdown-header">{{ __('admin.profile') }}</h6>
                        <a class="dropdown-item" href="{{ route('profile') }}">
                            <iconify-icon icon="solar:user-circle-broken"
                                class="fs-18 align-middle me-1"></iconify-icon>
                            <span class="align-middle">{{ __('admin.profile') }}</span>
                        </a>
                        <a class="dropdown-item" href="">
                            <iconify-icon icon="solar:translation-2-broken"
                                class="fs-18 align-middle me-1"></iconify-icon>
                            <span class="align-middle">{{ __('admin.manage_labels') }}</span>
                        </a>
                        <div class="dropdown-divider my-1"></div>
                        <form action="{{ route('logout') }}" method="POST">
                            @csrf
                            <button type="submit" class="dropdown-item text-danger">
                                <iconify-icon icon="solar:logout-2-broken"
                                    class="fs-18 align-middle me-1"></iconify-icon>
                                <span class="align-middle">{{ __('admin.logout') }}</span>
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>