<div class="container-fluid border-bottom">
    <header class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3">
        <div class="col-md-3 mb-2 mb-md-0">
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
                aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
                <i class="h4 bi bi-list"></i>
            </button>
            <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar"
                aria-labelledby="offcanvasNavbarLabel">
                <div class="offcanvas-header">
                    <h4 class="offcanvas-title fw-bold mb-0" id="offcanvasNavbarLabel">
                        {{ config('app.name') }}
                        {{ str_contains(request()->route()->getName(),'home.country')? get_country_emoji_by_iso($current_country_locale->country_iso): '' }}
                    </h4>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body p-0">

                    @if ($country_locales->count() > 1)
                        <div class="p-3">
                            <div class="dropdown d-grid">
                                <button class="btn btn-outline-primary dropdown-toggle" type="button"
                                    id="dropdownMenuSwitch" data-bs-toggle="dropdown" aria-expanded="false">
                                    {{ $current_country_locale->name }}
                                </button>

                                <ul class="dropdown-menu" aria-labelledby="dropdownMenuSwitch">
                                    @foreach ($country_locales as $country_locale)
                                        @if ($country_locale->id != $current_country_locale->id)
                                            <li><a class="dropdown-item"
                                                    href="{{ route('home.country', [
                                                        'country' => $country_locale->slug,
                                                    ]) }}">{{ $country_locale->name }}</a>
                                            </li>
                                        @endif
                                    @endforeach
                                </ul>

                            </div>
                        </div>

                        <div class="border-bottom"></div>
                    @endif

                    <div class="p-3">
                        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
                            <li class="nav-item">
                                <a class="nav-link active" aria-current="page"
                                    href="{{ route('home.country', ['country' => $current_country_locale->slug]) }}">Home</a>
                            </li>
                            @foreach ($categories as $category)
                                <li class="nav-item">
                                    <a class="nav-link active" aria-current="page"
                                        href="{{ route('home.country.category', ['country' => $category->country_locale_slug, 'category' => $category->slug]) }}">{{ $category->name }}</a>
                                </li>
                            @endforeach

                        </ul>
                    </div>

                </div>
            </div>
            <a href="/" class="d-inline-flex link-body-emphasis text-decoration-none">
                <h1 class="h4 mb-0 fw-bold">
                    {{ config('app.name') }}
                    {{ str_contains(request()->route()->getName(),'home.country')? get_country_emoji_by_iso($current_country_locale->country_iso): '' }}
                </h1>
            </a>
        </div>

        <ul class="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
            @foreach ($categories as $category)
                @if ($category->is_top)
                    <li><a href="{{ route('home.country.category', ['country' => $category->country_locale_slug, 'category' => $category->slug]) }}"
                            class="nav-link px-2 link-secondary">{{ $category->short_name }}</a></li>
                @endif
            @endforeach
        </ul>

        <div class="col-md-3 text-end">

        </div>
    </header>
</div>
