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

<h2 class="mb-5">USER list</h2>
<table>
    <tr class="head-row">
        @foreach($columns as $col)
            <th>{{$col}}</th>
        @endforeach
        <th style="width:50px">Actions</th>
    </tr>

    @foreach($records as $record)
        <tr>
            @foreach($columns as $key => $name)
                <td>{{$record[$key]}}</td>
            @endforeach
            <td class="text-center">

                <span for="action-{{$loop->index}}" class="actions-toggle">A</span>
                <div class="actions-popup">
                    <ul>
                        <li>1</li>
                        <li>1</li>
                        <li>1</li>
                        <li>1</li>
                    </ul>
                </div>
            </td>


        </tr>
    @endforeach

</table>

@push('scripts-stack')
    <script >

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


            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