@if($article->notes->where("pinned", true)->count() > 0)
        <div {{ $attributes->merge(['class' => 'mb-2 mx-1 p-3 bg-body rounded shadow-sm']) }} >
            
            <div class="d-flex align-items-center pb-2 mb-0">
                <div class="flex-grow-1">
                    <div>Pinned notes</div>
                </div>
            </div>

            @foreach($article->notes->where("pinned", true) as $index => $note)
                <x-list-items.note :note="$note"></x-list-items.note>
            @endforeach
            
        </div>
    @endif
    @if($article->notes->where("pinned", false)->count() > 0)
    <div {{ $attributes->merge(['class' => 'my-0 mx-1 p-3 bg-body rounded shadow-sm']) }}>
        
        <div class="d-flex align-items-center pb-2 mb-0">
            <div class="flex-grow-1">
                <div>Notes</div>
            </div>
        </div>

        <div notes-drag-root wire:sortable="sortNotes" >
            @foreach($article->notes->where("pinned", false) as $index => $note)
                <x-list-items.note :note="$note" ></x-list-items.note>
            @endforeach
        </div>

    </div>
    @endif

@push('script-js-footer')
    <script src="https://cdn.jsdelivr.net/gh/livewire/sortable@v0.x.x/dist/livewire-sortable.js"></script>

    <script>
        let root = document.querySelector('[notes-drag-root]');

        root.querySelectorAll('[notes-drag-item]').forEach(el => {
            el.addEventListener('dragstart', e=> {
                console.log('start');
            })

            el.addEventListener('dragenter', e=> {
                e.target.classList.add('bg-yellow-100');

                e.preventDefault();
            })

            el.addEventListener('dragleave', e=> {
                e.target.classList.remove('bg-yellow-100');
            })

            el.addEventListener('dragend', e=> {
                console.log('end');
            })
        })
    </script>
@endpush