@extends('layouts.app')

@section('head')
@endsection

@section('styles')
<style>
    .scroll-bar-hide::-webkit-scrollbar {
        display: none;
    }

    .scroll-bar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
</style>
@endsection

@section('content')

<main class="grid gap-y-4 px-1.5 py-20">

    {{-- DEFAULT SHOPPING LIST --}}
    <div>
        @livewire('product-list')
    </div>

    @livewire('add-product')

    {{-- SHOPPING LISTS --}}
    {{-- <div class="bg-white rounded-lg border border-stone-300 px-3">
        <ul role="list" class="divide-y divide-stone-100">
            <li class="relative flex items-center space-x-4 py-3">
                <div class="min-w-0 flex-auto">
                    <div class="flex items-center gap-x-3">
                        <h2 class="min-w-0 text-2xl font-semibold text-stone-900">
                            <a href="#" class="flex gap-x-2">
                                <span class="truncate">A101</span>
                            </a>
                        </h2>
                    </div>
                    <div class="mt-2 flex items-center gap-x-2.5 text-xs/5 text-stone-500">
                        <p class="truncate">Listede 34 ürün var</p>
                    </div>
                </div>
                <div class="flex-none rounded-full">
                    <img class="h-16 w-16 bg-stone-300 rounded border border-stone-300" src="" alt="">
                </div>
            </li>
            <li class="relative flex items-center space-x-4 py-3">
                <div class="min-w-0 flex-auto">
                    <div class="flex items-center gap-x-3">
                        <h2 class="min-w-0 text-2xl font-semibold text-stone-900">
                            <a href="#" class="flex gap-x-2">
                                <span class="truncate">MİGROS</span>
                            </a>
                        </h2>
                    </div>
                    <div class="mt-2 flex items-center gap-x-2.5 text-xs/5 text-stone-500">
                        <p class="truncate">Listede 5 ürün var</p>
                    </div>
                </div>
                <div class="flex-none rounded-full">
                    <img class="h-16 w-16 bg-stone-300 rounded border border-stone-300" src="" alt="">
                </div>
            </li>
        </ul>
    </div>
    --}}
</main>

@endsection

@section('scripts')
<script>
    document.addEventListener('livewire:init', () => {
        Livewire.on('success', (event) => {
            // Show success message
            alert(event.message);
        });

        Livewire.on('error', (event) => {
            // Show error message
            alert(event.message);
        });
    });
</script>
@endsection