{{-- start header area --}}
<header class="ib-header header-default header-fixed header--sticky fluid-header">
    <div class="header-inner d-flex align-items-center justify-content-between">
        <div class="header-left d-flex align-items-center">
            <div class="logo-wrapper">
                <a href="/" class="logo logo-light">
                    <img src="{{ Vite::asset('resources/img/logo-dark-naag.png') }}" alt="No Agenda Art Generator"
                        title="No Agenda Art Generator - Home">
                </a>
                <a href="/" class="logo logo-dark">
                    <img src="{{ Vite::asset('resources/img/logo-white-naag.png') }}" alt="No Agenda Art Generator"
                        title="No Agenda Art Generator - Home">
                </a>
            </div>
            <div class="mainmenu-wrapper">
                <nav id="sideNav" class="mainmenu-nav d-none d-xl-block">
                    @include('partials/nav/main')
                </nav>
            </div>
        </div>
        <div class="header-right d-flex align-items-center">
            <ul class="header-right-inner">
                <li class=" d-none d-lg-block">
                    <form action="#" class="search-bar">
                        <input type="text" name="search" placeholder="Artist, Podcast or Episode" id="search">
                        <button class="search-btn" type="submit"> <i class="ri-search-line"></i></button>
                    </form>
                </li>
                <li class="setting-option d-block  d-lg-none ">
                    <div class="icon-box search-mobile-icon">
                        <button><i class="ri-search-line"></i></button>
                    </div>
                    <form id="header-search-1" action="#" method="GET" class="large-mobile-blog-search search-bar">
                        <input type="text" name="search" placeholder="Artist, Podcast or Episode" id="search_2">
                        <button class="search-btn" type="submit"> <i class="ri-search-line"></i></button>
                    </form>
                </li>
                <li class="wallet-button"> <a href="wallet.html" class="btn btn-gradient btn-small">
                    <span><i class="ri-wallet-3-line"></i>Join In</span></a>
                </li>
                <li class="avatar-info"> <a href="#"><img src="{{ Vite::asset('resources/img/default_avatars/default_avatar_users_' . str_pad(rand(1, 50), 2, '0', STR_PAD_LEFT) . '.svg') }}" alt="user avatar"></a>
                    <ul class="submenu">
                        <li><a href="author-profile.html"><i class="ri-user-line"></i> Profile</a></li>
                        <li><a href="create.html"><i class="ri-edit-line"></i> Create Item</a></li>
                        <li><a href="authors.html"><i class="ri-layout-grid-line"></i>Authors</a></li>
                        <li><a href="signin.html"><i class="ri-logout-box-r-line"></i>Sign in</a></li>
                    </ul>
                </li>
                <li>
                    <label class="theme-switcher-label d-flex" for="theme-switcher">
                    <input type="checkbox" class="theme-switcher" id="theme-switcher">
                    <div class="switch-handle">
                        <i class="ri-sun-line light-text"></i>
                        <i class="ri-moon-line dark-text"></i>
                    </div>
                    </label>
                </li>
                <li class="setting-option mobile-menu-bar d-block d-xl-none">
                    <button class="hamburger-button">
                        <i class="ri-menu-2-fill"></i>
                    </button>
                </li>
            </ul>
        </div>
    </div>
</header>
{{-- end header area --}}
{{-- start mobile pop-up menu --}}
<div class="popup-mobile-menu">
    <div class="inner">
        <div class="header-top">
            <div class="logo logo-custom-css">
                <a href="/" class="logo logo-light">
                    <img src="{{ Vite::asset('resources/img/logo-dark-naag-mob.png') }}" alt="No Agenda Art Generator"
                        title="No Agenda Art Generator - Home">
                </a>
                <a href="/" class="logo logo-dark">
                    <img src="{{ Vite::asset('resources/img/logo-white-naag-mob.png') }}" alt="No Agenda Art Generator"
                        title="No Agenda Art Generator - Home">
                </a>
            </div>
            <div class="close-menu">
                <button class="close-button">
                    <i class="ri-close-fill"></i>
                </button>
            </div>
        </div>
        <nav>
            @include('partials/nav/main') 
        </nav>
    </div>
</div>
{{-- end mobile pop-up menu --}}