 <div class="table-responsive">
  <table id="example" class="table table-bordered align-middle" style="width:100%">
    <thead class="table-light">
      <tr>
        <th class="thbutton">Sl No</th>
        <th>Role Name</th>
        <th class="thbutton">Permissions</th>
        <th class="thbutton">Role</th>
        <th class="thbutton">Delete</th>
    </tr>
</thead>
<tbody>
    @php $i=1;@endphp
    @if(count($data)>0)
    @foreach($data as $key=> $list)
    <tr>
        <td>{{$data->firstItem() + $key}}</td>
        <td>{{$list->name}}</td>
        @if(in_array('role-edit', $authRolePermissions))
        <td class="text-center"> 
            <a href="{{route('roles.edit',$list->id)}}" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Edit">
                <i class="bi bi-pencil-square text-white"></i>
            </a>
        </td>
        @endif
        <td class="text-center">
            @if(in_array('role-edit', $authRolePermissions))
                <button data-id="{{ $list->id }}" class="btn btn-warning edit" data-bs-toggle="modal" data-bs-target="#commonModal" title="Edit">
                    <i class="bi bi-pencil-square text-white"></i>
                </button>
            @endif
        </td>
        @if(in_array('role-delete', $authRolePermissions))
        <td class="text-center">
            <a data-url="{{route('roles.destroy')}}" data-id="{{$list->id}}" class="btn btn-danger deleteDataCustom" class="text-danger" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Delete">
                <i class="bi bi-trash text-white"></i>
            </a>
        </td>
        @endif
    </tr>
    @php $i++; @endphp
    @endforeach
    @else
    <tr>
        <td colspan="8">No Data Found</td>
    </tr>
    @endif
</tbody>
</table>
</div>
<nav class="float-end mt-2">
    <ul class="pagination">
        {!! $data->onEachSide(0)->render('roles.pagination') !!}
    </ul>
</nav>
</div>
