@push('stylesheets')
    <link rel="stylesheet" href="{{asset('css/list-wrapper.css')}}"/>
@endpush

<div blade="{{ $viewName ?? 'unknown' }}" class="table-container">
    @if($empty == 0)
        <div class="empty">
            <img class="empty-img" src="{{asset('images/desert.svg')}}" alt="empty"/>
            <p class="empty-text">Oh no there is nothing here!
            </p>
        </div>
    @else
        <table>
            <thead>
            <tr class="head-row">
                {{ $tHead }}
            </tr>
            </thead>
            <tbody>
            {{ $tBody }}
            </tbody>
        </table>
    @endif
</div>
@once
    @push('scripts-stack')
        <script>

            const toggles = document.getElementsByClassName("actions-toggle")
            window.onclick = function (event) {

                if (event.target.matches('.actions-popup, .actions-popup ul')) {
                    return
                }

                const togglesArray = Array.from(toggles)

                togglesArray.forEach((el) => {
                    el.classList.remove('show')
                })

                const clicked = togglesArray.find((toggle) => {
                    return toggle.contains(event.target)
                })

                if (clicked) {
                    clicked.classList.add('show')
                }

            }
        </script>
    @endpush
@endonce