@props(['category' => null])
@if($category)
    @if(isDesktop())
        <div class="bg-white rounded-none md:rounded-2xl border-0 md:border border-gray-300 p-4">
            <h2 class="font-bold text-lg mb-4 text-center text-primary-color">
                @if($category->parent)
                    <a href="{{route('shop.category.id',($category->parent->objectData->slug ?? $category->parent->id))}}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="inline ml-2"
                             width="24" height="24" fill-rule="evenodd" clip-rule="evenodd">
                            <path
                                d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/>
                        </svg>
                    </a>
                @endif
                {{$category->objectData->title}}
            </h2>
            @if(count($category->childes))
                <div class="mt-4 flex flex-row flex-wrap gap-3w-full lg:p-4 justify-center ">
                    @foreach($category->childes as $child)
                        <a class="px-3 py-1 rounded-lg bg-green-100 border text-sm
                                    border-green-600 w-max h-min"
                           href="{{route('shop.category.id',($child->objectData->slug ?? $child->id))}}">
                            {{$child->objectData->title}}
                        </a>
                    @endforeach
                </div>
            @endif
        </div>
    @else
        <div class="bg-green-700 rounded-none  p-2">
            <h2 class="font-bold text-xl mb-2 text-center text-white pt-4">
                @if($category->parent)
                    <a href="{{route('shop.category.id',($category->parent->objectData->slug ?? $category->parent->id))}}">
                        <svg xmlns="http://www.w3.org/2000/svg" class="inline ml-2" fill="white"
                             width="24" height="24" fill-rule="evenodd" clip-rule="evenodd">
                            <path
                                d="M21.883 12l-7.527 6.235.644.765 9-7.521-9-7.479-.645.764 7.529 6.236h-21.884v1h21.883z"/>
                        </svg>
                    </a>
                @endif
                {{$category->objectData->title}}
            </h2>

            <div x-data="{ open: 0 }">
                <div class=" flex w-full items-center justify-center" @click="open = ! open">
                    <span class="font-medium text-white text-sm py-2">دسته بندی</span>
                    <span class="cursor-pointer">
						<svg x-cloak x-show="!open" xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                             class="w-4 h-4 text-white">
							<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
						</svg>
						<svg xmlns="http://www.w3.org/2000/svg" x-show="open" fill="none"
                             viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
                             class=" w-4 h-4 text-white">
							<path stroke-linecap="round" stroke-linejoin="round"
                                  d="M4.5 15.75l7.5-7.5 7.5 7.5"/>
						</svg>
					</span>
                </div>
                <div
                    class="bg-green-700 items-center w-full overflow-hidden max-h-0 transition-all ease-in-out duration-500"
                    x-ref="container"
                    x-bind:style="open ? 'max-height: ' + $refs.container.scrollHeight + 'px' : ''"
                >
                    @if(count($category->childes))
                        <div
                            class="my-2 flex flex-row flex-wrap gap-3w-full lg:p-4 justify-center ">
                            @foreach($category->childes as $child)
                                <a class="px-3 py-1 rounded-lg bg-green-100 border text-sm border-green-600 w-max h-min"
                                   href="{{route('shop.category.id',($child->objectData->slug ?? $child->id))}}">
                                    {{$child->objectData->title}}
                                </a>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif
@endif