<header>
    <nav class="navbar navbar-expand-lg navbar-custom sticky-top">
        <div class="container">
            <a class="navbar-brand fw-bold" href="{{ route('home', ['lang' => $lang]) }}">
                <img class="d-none d-sm-block" alt="DramaBox" loading="lazy" src="{{config('app.logo_web')}}">   
                <img class="d-sm-none" alt="DramaBox" loading="lazy" src="{{config('app.logo_sm')}}">   
            </a>
            
            <form class="search-form-wrapper d-sm-none" role="search" action="{{ route('search', ['lang' => $lang, 'page' => 1]) }}" style="width: 250px;"> 
                <input class="form-control form-control-sm" type="text" name="s" placeholder="{{ __('translate.search') }}" aria-label="Search" style="padding: .4rem;">
                <button class="search-icon-btn" type="submit" aria-label="Cari" style="right: 0.25rem;">
                    <i class="bi bi-search"></i>
                </button>
            </form>

            <button class="navbar-toggler d-lg-none" type="button" 
                    data-bs-toggle="offcanvas" data-bs-target="#mobileMenuOffcanvas" 
                    aria-controls="mobileMenuOffcanvas"
                    aria-label="Nav Menu"
                    >
            </button>

            <div class="d-none d-lg-flex justify-content-between w-100"> 
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link header @if(Route::is('home')) active @endif" aria-current="page" href="{{ route('home', ['lang' => $lang]) }}">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link header @if(Route::is('archive')) active @endif" href="{{ route('archive', ['lang' => $lang, 'page' => 1]) }}">Browser</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link header @if(Route::is('history')) active @endif" href="{{ route('history', ['lang' => $lang]) }}">History</a>
                    </li>
                    @if (Route::is('home') )
                    <li class="nav-item dropdown">
                        @if($lang == 'in' || $lang == '' ? 'active ' : '')
                        <a class="nav-link header dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Bahasa Indonesia
                        </a>
                        @endif
                        @if($lang == 'en' ? 'active ' : '')
                        <a class="nav-link header dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            English
                        </a>
                        @endif
                        @if($lang == 'es' ? 'active ' : '')
                        <a class="nav-link header dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Spanyol
                        </a>
                        @endif
                        @if($lang == 'de' ? 'active ' : '')
                        <a class="nav-link header dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Deutsch
                        </a>
                        @endif
                        @if($lang == 'fr' ? 'active ' : '')
                        <a class="nav-link header dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Français
                        </a>
                        @endif
                        @if($lang == 'pt' ? 'active ' : '')
                        <a class="nav-link header dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Português
                        </a>
                        @endif
                        <ul class="dropdown-menu dropdown-menu-arrow" aria-labelledby="languageDropdown">
                            <li><a class="dropdown-item  {{ ($lang == 'en') ? 'active ' : ''}}" {{ ($lang == 'en') ? 'aria-current="true" ' : ''}} href="/en">English</a></li>
                            <li><a class="dropdown-item {{ ($lang == 'es') ? 'active' : ''}}" {{ ($lang == 'en') ? 'aria-current="true" ' : ''}} href="/es">Español</a></li>
                            <li><a class="dropdown-item {{ ($lang == 'in' || $lang == '') ? 'active' : ''}}" {{ ($lang == 'in' || $lang == '') ? 'aria-current="true" ' : ''}} href="/in">Bahasa Indonesia</a></li>
                            <li><a class="dropdown-item {{ ($lang == 'de') ? 'active ' : ''}}" {{ ($lang == 'de') ? 'aria-current="true" ' : ''}} href="/de">Deutsch</a></li>
                            <li><a class="dropdown-item {{ ($lang == 'fr') ? 'active ' : ''}}" {{ ($lang == 'fr') ? 'aria-current="true" ' : ''}}  href="fr">Français</a></li>
                            <li><a class="dropdown-item {{ ($lang == 'pt') ? 'active ' : ''}}" {{ ($lang == 'pt') ? 'aria-current="true" ' : ''}}  href="/pt">Português</a></li>
                        </ul>
                    </li>
                    @endif
                </ul>

                <form class="search-form-wrapper d-flex" action="{{ route('search', ['lang' => $lang, 'page' => 1]) }}" role="search" style="width: 250px;"> 
                    <input class="form-control form-control-sm" name="s" type="text" placeholder="{{ __('translate.search') }}" aria-label="Search">
                    <button class="search-icon-btn" type="submit" aria-label="Cari" style="right: 0.25rem;">
                        <i class="bi bi-search"></i>
                    </button>
                </form>
            </div>
        </div>
        
        @if(!Route::is('single') && !Route::is('episode'))
        <div class="container d-sm-none">
            <nav class="submenu-nav w-100">
                <ul class="d-flex align-items-center">
                    
                    <li class="@if(Route::is('home')) active @endif">
                        <a href="{{ route('home', ['lang' => $lang]) }}"><span>For You</span></a>
                    </li>
                    
                    <li class="@if(Route::is('archive')) active @endif">
                        <a href="{{ route('archive', ['lang' => $lang, 'page' => 1]) }}"><span>Browse</span></a>
                    </li>
                    <li class="@if(Route::is('history')) active @endif">
                        <a href="{{ route('history', ['lang' => $lang]) }}"><span>History</span></a>
                    </li>
                    @if (Route::is('home') )
                    <li class="dropdown ms-auto position-relative">
                        <a class="dropdown-toggle nav-link header" href="#" id="langMobileDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" style="text-decoration: none; color: inherit;">
                            <i class="bi bi-globe"></i> {{ strtoupper(trim($lang ?? '') ?: 'in') }}
                        </a>
                        <ul class="dropdown-menu dropdown-menu-arrow dropdown-menu-end" aria-labelledby="langMobileDropdown">
                            <li><a class="dropdown-item" href="/in">Bahasa Indonesia</a></li>
                            <li><a class="dropdown-item" href="/en">English</a></li>
                            <li><a class="dropdown-item" href="/es">Español</a></li>
                            <li><a class="dropdown-item" href="/de">Deutsch</a></li>
                            <li><a class="dropdown-item" href="/fr">Français</a></li>
                            <li><a class="dropdown-item" href="/pt">Português</a></li>
                        </ul>
                    </li>
                    @endif
                </ul>
            </nav>
        </div>
        @endif
    </nav>
    <div class="offcanvas offcanvas-start" tabindex="-1" id="mobileMenuOffcanvas" aria-labelledby="mobileMenuLabel" data-bs-theme="dark">
        <div class="offcanvas-header">
            <img height="40px" class="" alt="{{config('app.name')}}" loading="lazy" src="{{config('app.logo_web')}}"> 
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link side @if(Route::is('home')) active @endif" aria-current="page" href="{{ route('home', ['lang' => $lang]) }}">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link side @if(Route::is('archive')) active @endif" href="{{ route('archive', ['lang' => $lang, 'page' => 1]) }}">Browser</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link side @if(Route::is('history')) active @endif" href="{{ route('history', ['lang' => $lang]) }}">History</a>
                </li>
            </ul>
        </div>
    </div>
</header>
