@forelse ($groups as $item)
    <tr style="cursor: pointer;" onclick="window.location.href='{{ route('group.detail', ['id' => encrypt($item->id)]) }}'">
        <td class="has-text-centered">{{ $loop->index + 1 + $groups->perPage() * ($groups->currentPage() - 1) }}</td>
        <td>{{ $item->group_name }}</td>
        <td>{{ $item->group_description ?? '-' }}</td>
        <td class="has-text-centered">{{ $item->user_count }}</td>
        <td class="has-text-centered" onclick="event.stopPropagation();">
            @hasrole(['super_admin'])
                <button type="button" class="button h-button h-modal-trigger edit-button-critical-activity" title="Edit"
                    onclick="showModalEdit(`{{ route('group.edit', ['id' => $item->id]) }}`)" >
                    <span class="icon">
                        @include('components.icons.pencil-alt')
                    </span>
                </button>
            @endhasrole
            {{-- <a href="{{ route('group.detail', ['id' => encrypt($item->id)]) }}" class="button h-button"
                title="Detail Group">
                <span class="icon">
                    <i class="fa-solid fa-list"></i>
                </span>
            </a> --}}
        </td>
    </tr>
@empty
    <tr>
        <td colspan="5" class="has-text-centered">
            @include('components.empty.empty-state')
        </td>
    </tr>
@endforelse

<script>
    function showModalEdit(url) {
        $.ajax({
            url: url,
            success: (res) => {
                $('#container_modal_edit').html(res)
                $('#modal_edit_group').addClass('is-active')
            }
        })
    }
</script>