<div class="dropdown d-none d-lg-block w-100 me-4" style="max-width: 200px">
    <button type="button" class="btn btn-lg btn-secondary w-100 border-0 rounded-pill" data-bs-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">
        <i class="ci-grid fs-lg me-2 ms-n1"></i>
        {{ __('navbar.categories') }}
        <i class="ci-chevron-down fs-lg me-2 ms-auto me-n1"></i>
    </button>
    <div class="dropdown-menu rounded-4 p-4" style="--cz-dropdown-spacer: .75rem; margin-left: -75px">
        <div class="d-flex gap-4">
            <div style="min-width: 170px">
                <div class="h6">{{ __('navbar.categories') }}</div>
                <ul class="nav flex-column gap-2 mt-n2">

                    @foreach ($categories as $category)
                        @if ($category->productCount() > 0)
                            <li class="d-flex w-100 pt-1">
                                <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                    href="{{ route('product.index', ['category_id', $category->id]) }}">{{ $category->name }}</a>
                            </li>
                        @endif
                    @endforeach

                </ul>

            </div>
            <div style="min-width: 170px">
                <div class="h6">{{ __('navbar.gender') }}</div>
                <ul class="nav flex-column gap-2 mt-n2">
                    @foreach ($genders as $gender)
                        <li class="d-flex w-100 pt-1">
                            <a class="nav-link animate-underline animate-target d-inline fw-normal text-truncate p-0"
                                href="{{ route('product.index', ['filter[gender]' => $gender->id]) }}">{{ $gender->name }}</a>
                        </li>
                    @endforeach

                </ul>

            </div>

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