{{-- 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>
                --}}
                @if (!Auth::user())
                    <li class="wallet-button"> <a href="/login" class="btn btn-gradient btn-small">
                        <span><i class="ri-wallet-3-line"></i>Join In</span></a>
                    </li>
                @else
                <li class="avatar-info"> <a href="#"><img
                    @if (Auth::user() && Auth::user()->artists->first())
                        src="{{ Vite::asset(Auth::user()->artists->first()->avatar ?? 'resources/img/default_avatars/default_avatar_male.svg') }}"
                    @else
                        src="{{ Vite::asset('resources/img/default_avatars/default_avatar_male.svg') }}"
                    @endif
                        alt="user avatar"></a>
                    <ul class="submenu">
                        @if (Auth::user())
                            <li><a href="/artist/{{ Auth::user()->artists->first()->slug }}"><i class="ri-user-line"></i> Profile</a></li>
                            <li><a href="/create-artwork"><i class="ri-image-add-line"></i> Create Artwork</a></li>
                            <form method="post" action="/logout" name="logout" id="logoutForm">
                                @csrf
                                <li><a href="#" onclick="event.preventDefault(); document.getElementById('logoutForm').submit();"><i class="ri-logout-box-r-line"></i>Sign Out</a></li>
                            </form>

                        @else
                            <li><a href="/login"><i class="ri-logout-box-r-line"></i>Sign in</a></li>
                        @endif
                    </ul>
                </li>
                @endif
                @if (auth()->user())
                <livewire:themeswitch />
                @else
                <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>
                @endif
                <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 --}}