@props(['total' => 0])

@if(isMobile())
    <div class="float-right flex gap-4 sticky top-0 bg-white  border-b py-4 z-10">
        <button id="filterBtn"
                class=" flex h-10 w-20 text-sm font-semibold items-center justify-center pr-2">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                 stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75"/>
            </svg>
            فیلتر ها
        </button>
        <button id="sortBtn"
                class="flex h-10 w-24 text-sm font-semibold items-center justify-center">
            <svg class="w-6 ml-2" focusable="false" aria-hidden="true"
                 viewBox="0 0 24 24" data-testid="SortRoundedIcon">
                <path
                    d="M4 18h4c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1zm1 6h10c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1z"></path>
            </svg>
            مرتب سازی
        </button>
    </div>
    @if($total)
        <hr>
        <span class="flex justify-between text-sm font-light p-4">
            <h4>همه کالاها</h4>
            <span>
                <span>{{$total}}</span>
                <span>کالا</span>
            </span>
        </span>
    @endif
@endif