<header>
    <!-- start navigation -->
    <nav class="navbar navbar-expand-lg header-transparent bg-transparent header-reverse glass-effect"
        data-header-hover="light">
        <div class="container-fluid">
            <div class="col-auto col-xxl-3 col-lg-2 me-lg-0 me-auto">
                <a class="navbar-brand" href="{{ url('/') }}">
                    @if ($general->site_logo)
                        <img src="{{ asset('storage/' . $general->site_logo) }}"
                            data-at2x="{{ asset('storage/' . $general->site_logo) }}" alt="{{ $general->site_name }}"
                            class="default-logo">
                        <img src="{{ asset('storage/' . $general->site_logo) }}"
                            data-at2x="{{ asset('storage/' . $general->site_logo) }}" alt="{{ $general->site_name }}"
                            class="alt-logo">
                        <img src="{{ asset('storage/' . $general->site_logo) }}"
                            data-at2x="{{ asset('storage/' . $general->site_logo) }}" alt="{{ $general->site_name }}"
                            class="mobile-logo">
                    @else
                        <img src="{{ asset('assets/img/logo/icon-with-text.png') }}" alt="logo"
                            class="default-logo">
                        <img src="{{ asset('assets/img/logo/icon-with-text.png') }}" alt="logo" class="alt-logo">
                        <img src="{{ asset('assets/img/logo/icon-with-text.png') }}" alt="logo"
                            class="mobile-logo">
                    @endif
                </a>
            </div>
            <div class="col-auto col-xxl-6 col-lg-8 menu-order position-static">
                <button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
                    <span class="navbar-toggler-line"></span>
                    <span class="navbar-toggler-line"></span>
                    <span class="navbar-toggler-line"></span>
                    <span class="navbar-toggler-line"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a wire:navigate href="{{ route('home') }}"
                                class="nav-link {{ Route::is('home') ? 'active' : '' }}">Beranda</a>
                        </li>
                        <li class="nav-item">
                            <a wire:navigate href="{{ route('about-us') }}"
                                class="nav-link {{ Route::is('about-us') ? 'active' : '' }}">Tentang Kami</a>
                        </li>
                        <li class="nav-item">
                            <a wire:navigate href="{{ route('news.index') }}"
                                class="nav-link {{ Route::is('news.index') || Route::is('news.show') ? 'active' : '' }}">Berita</a>
                        </li>
                        <li class="nav-item">
                            <a wire:navigate href="{{ route('announcement') }}"
                                class="nav-link {{ Route::is('announcement') ? 'active' : '' }}">Pengumuman</a>
                        </li>
                        <li class="nav-item">
                            <a wire:navigate href="{{ route('contact-us') }}"
                                class="nav-link {{ Route::is('contact-us') ? 'active' : '' }}">Kontak</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="col-auto col-xxl-3 col-lg-2 text-end d-none d-sm-flex">
                <div class="header-icon">
                    <div class="header-button">
                        <a href="{{ route('filament.dashboard.auth.login') }}"
                            class="btn btn-large btn-transparent-white-light btn-rounded text-transform-none border-1">
                            {{ auth()->check() ? 'Dasbor' : 'Masuk' }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </nav>
    <!-- end navigation -->
</header>
