<div 
    id="categories-dropdown-container"
    class="c1p" 
    v-show="! categories_dropdown_hidden" 
    @mouseleave="hideCategoryDropdown()"
    style="display: none; max-height: calc(100vh - 300px);"
  >
   <div class="pc1">
      <div class="p1c" style="max-height:calc(100vh - 300px);">
        <div>
          @foreach($categories as $category)
              {{-- pc --}}
              <a target="_self" 
                href="{{ route('web.categories.products', ['category' => $category->slug]) }}" 
                
                :class="{a4: true, o8c: true, c9o: true, o9c: true, pc: activeLinks['{{ $category->slug }}']}" 
                @mouseenter="showCategoriesFor({{ $category->id }})"
              >
                <span class="oc9">{{ $category->name }}</span>
              </a>
          @endforeach
        </div>
      </div>
      <div class="oc6" style="max-height:calc(100vh - 300px);">
        <div class="o6c">
          <div class="co7">
            {{-- <a target="_self" href="https://www.ozon.ru/highlight/183670/" class="a4 o8c p0c">
              <span class="oc9">Best Home Brands</span>
            </a>
            <a target="_self" href="https://www.ozon.ru/category/dom-i-sad-14500/?isnew=t" class="a4 o8c p0c">
              <span class="oc9">Новинки</span>
            </a>
            <a target="_self" href="https://www.ozon.ru/category/dom-i-sad-14500/?isbest=t&amp;price=400.000%3B1814500.000" class="a4 o8c p0c">
              <span class="oc9">Бестселлеры</span>
            </a>
            <a target="_self" href="https://www.ozon.ru/info/actions/?category=14500" class="a4 o8c p0c">
              <span class="oc9">Акции</span>
            </a> --}}
          </div>
          <div class="c8o">
            <div class="c7o">
              <div class="o7c oc7">
                <template v-for="category in categories_to_show.children">
                  <div :class="{'o5c': true, 'mb-0': category.children.length < 1}">
                    <a target="_self" :href="categoryShowRouteFor(category.slug)" class="a4 o8c cp0">
                      <span class="oc9">@{{ category.name[locale] }}</span>
                    </a>
                    <div class="c6o">
                      <template v-for="child_category in category.children">
                        <a target="_self" :href="categoryShowRouteFor(child_category.slug)" class="a4 o8c c0p">
                          <span class="oc9">@{{ child_category.name[locale] }}</span>
                        </a>
                      </template>
                    </div>
                  </div>
                </template>
              </div>
              <div class="oc7 co8">
                {{-- <a target="_self" href="/brand/tefal-18819636/" class="a4 o8c co9" style="background-image: url(https://cdn1.ozone.ru/multimedia/wc100/1023444926.jpg);"></a> --}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>
