@extends('admin.layouts.master')
@section('title', 'Roles')

@section('content')
<div class="page-content-wrapper"><div class="content-container"><div class="page-content">
    <div class="content-header d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0"><i class="ti ti-shield me-1"></i> Roles</h4>
        @can('roles.create')
            <a href="{{ route('admin.security.roles.create') }}" class="btn btn-primary"><i class="ti ti-plus me-1"></i> New Role</a>
        @endcan
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <table id="roles-table" class="table table-bordered table-hover w-100">
                <thead class="table-light">
                    <tr>
                        <th>#</th><th>Name</th><th>Guard</th><th>Permissions</th><th>Users</th><th>Created</th><th>Actions</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div></div></div>
@endsection

@push('scripts')
<script>
$(function () {
    $('#roles-table').DataTable({
        processing: true, serverSide: true, responsive: true,
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/en-GB.json' },
        ajax: '{{ route('admin.security.roles.index') }}',
        columns: [
            {data: 'id'},
            {data: 'name'},
            {data: 'guard_name'},
            {data: 'permissions_count', className: 'text-center'},
            {data: 'users_count', className: 'text-center'},
            {data: 'created_at'},
            {data: 'actions', orderable: false, searchable: false},
        ]
    });
});
</script>
@endpush