<!-- DataTables -->
<link rel="stylesheet" href="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">

	<!-- Content Header (Page header) -->
	<section class="content-header">
		<div class="container-fluid">
			<div class="row mb-2">
				<div class="col-sm-6">
					<h1><?php echo $meta_title; ?></h1>
				</div>
				<div class="col-sm-6">
					<ol class="breadcrumb float-sm-right">
						<li class="breadcrumb-item"><a href="<?php echo base_url().$this->config->item('admin_folder').'/'.'dashboard'; ?>">Home</a></li>
						<li class="breadcrumb-item active"><?php echo $meta_title; ?></li>
					</ol>
				</div>
			</div>
		</div><!-- /.container-fluid -->
	</section>

	<section class="content">
		<div class="container-fluid">
			<div class="row">
				<div class="col-12">
					<div class="card">
						<div class="card-header">
							<h3 class="card-title"><?php echo $meta_title; ?></h3>

							<div class="card-tools">
								<a href="<?php echo base_url().$this->config->item('admin_folder').'/roles/edit'; ?>" class="btn btn-primary btn-block">Add new role</a>
							</div>
						</div>
						<!-- /.card-header -->

						<div class="card-body table-responsive">
							<table class="table table-hover table-bordered text-wrap" id="<?php echo $page_name; ?>">
								<thead>
									<tr>
										<th>#</th>
                                        <th>Role Name</th>
                                        <th>Status</th>
                                        <th>Actions</th>
									</tr>
								</thead>
								<tbody>

								</tbody>
							</table>
						</div>
						<!-- /.card-body -->
					</div>
					<!-- /.card -->
				</div>
			</div>
		</div>
	</section>

</div>
<!-- /.content-wrapper -->

<!-- DataTables -->
<script src="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables/jquery.dataTables.min.js"></script>
<script src="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="<?php echo $this->config->item('admin_assets_folder'); ?>plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>

<script>
	var dataTable =$('#<?php echo $page_name; ?>').DataTable({
      	"paging": true,
      	"lengthChange": false,
      	"searching": true,
      	"ordering": false,
      	"info": true,
      	"autoWidth": false,
		"pageLength": 10,
		"processing": true, //Feature control the processing indicator.
		"serverSide": true,
      	"columnDefs": [
		   { "orderable": false, "width": 150, "targets": [0,1,2,3] }
		],
        fixedColumns: true,
		"ajax": {
            url : "<?php echo base_url().$this->config->item('admin_folder').'/roles/ajax_load_data'; ?>",
            type : 'POST',
            global : false
        },
        'responsive': true
    });
</script>