@if(isset($dark))
<header class="main-header position-absolute w-100">
    <nav class="navbar navbar-expand-xl navbar-dark sticky-header">
@else
<header class="main-header w-100">
    <nav class="navbar navbar-expand-xl navbar-light sticky-header">
@endif
        <div class="container d-flex align-items-center justify-content-lg-between position-relative">
            <a href="{{ route('home') }}" class="navbar-brand d-flex align-items-center mb-md-0 text-decoration-none">
                <img src="{{ asset('img/logo-white.png?v=' . Helper::$version) }}" alt="logo" class="img-fluid logo-white" />
                <img src="{{ asset('img/logo-color.png?v=' . Helper::$version) }}" alt="logo" class="img-fluid logo-color" />
            </a>
            <a class="navbar-toggler position-absolute right-0 border-0" href="#offcanvasWithBackdrop" role="button">
                <span class="far fa-bars" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop"></span>
            </a>
            <div class="clearfix"></div>
            <div class="collapse navbar-collapse justify-content-center">
                <ul class="nav col-12 col-md-auto justify-content-center main-menu">
                    <li><a href="{{ route('news') }}" class="nav-link">News</a></li>
                    <li><a href="{{ route('download') }}" class="nav-link">Download</a></li>
                    <li><a href="{{ route('contact') }}" class="nav-link">Contact</a></li>
                </ul>
            </div>
            <div class="action-btns text-end me-5 me-lg-0 d-none d-md-block d-lg-block">
                @if(!auth()->check())
                <a href="{{ route('login') }}" class="btn btn-link text-decoration-none me-2">Sign In</a>
                <a href="{{ route('register') }}" class="btn btn-primary">Get Started</a>
                @elseif(!isset($nav_bar_dash))
                <a href="{{ route('dashboard') }}" class="btn btn-primary getStarted">Dashboard</a>
                @endif
            </div>
            @if(auth()->check())
            <div class="profileArea">
                <div class="user-prof">
                    @php
                        $profile_image = 'img/preloader.png';
                        if(auth()->user()->image && file_exists('uploads/user_profile/'.auth()->user()->image)) {
                            $profile_image = 'uploads/user_profile/'.auth()->user()->image;
                        }
                    @endphp
                    <div class="user-dp" style="background-image: url('{{ asset('/') }}{{ $profile_image }}')"></div>
                    <span>{{ auth()->user()->username }}</span>
                </div>
                <div class="profile-options">
                    <ul>
                        <li><a href="{{ route('settings') }}">My Account</a></li>
                        @if(auth()->user()->is_admin)
                        <li><a href="{{ route('admin-dashboard') }}">Admin Panel</a></li>
                        @endif
                        <li><a href="{{ route('change-password') }}">Change Password</a></li>
                        <li><a href="{{ route('logout') }}">Logout</a></li>
                    </ul>
                </div>
            </div>
            @endif
            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasWithBackdrop">
                <div class="offcanvas-header d-flex align-items-center mt-4">
                    <a href="{{ route('home') }}" class="d-flex align-items-center mb-md-0 text-decoration-none">
                        <img src="{{ asset('img/logo-color.png?v=' . Helper::$version) }}" alt="logo" class="img-fluid ps-2" />
                    </a>
                    <button type="button" class="close-btn text-danger" data-bs-dismiss="offcanvas" aria-label="Close"><i class="far fa-close"></i></button>
                </div>
                <div class="offcanvas-body">
                    <ul class="nav col-12 col-md-auto justify-content-center main-menu">
                        <li><a href="{{ route('news') }}" class="nav-link">News</a></li>
                        <li><a href="{{ route('download') }}" class="nav-link">Download</a></li>
                        <li><a href="{{ route('contact') }}" class="nav-link">Contact</a></li>
                    </ul>
                    <div class="action-btns mt-4 ps-3">
                        @if(!auth()->check())
                        <a href="{{ route('login') }}" class="btn btn-outline-primary me-2">Sign In</a>
                        <a href="{{ route('register') }}" class="btn btn-primary">Get Started</a>
                        @elseif(!isset($nav_bar_dash))
                        <a href="{{ route('dashboard') }}" class="btn btn-primary getStarted">Dashboard</a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </nav>
</header>