@extends('layouts.admin')

@section('title') Roles @endsection

@section('page_title') Roles @endsection

@section('content')
 
    @push('page_style')
		@include('include.dataTableStyles')
	@endpush

    <!-- Main content -->
    <section>
        <div class="row">
            <div class="col-12">
                <div class="card data-table">
                    <div class="card-header">
                            <h3 class="card-title">List of all the roles</h3>
                            <a href="javascript:void(0)" id="create-role-button" data-toggle="modal" data-target="#addRoleModal" class="btn btn-primary float-right">
                                <i class="fas fa-plus"></i>&nbsp;&nbsp;Create New Role
                            </a>
                    </div>
                
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table id="roleTable" class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>S.No</th>
                                    <th>Title</th>
                                    <th>Created At</th>
                                    <th data-orderable="false">Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
        </div>
      <!-- /.container-fluid -->
    </section>

    @include('role.modals.createRole')

    @include('role.modals.editRole')


    @push('page_script')

        @include('include.dataTableScripts')
        <script src="{{ asset('js/pages/role/index.js') }}"></script>
        <script src="{{ asset('js/pages/role/createRole.js') }}"></script>

    @endpush

@endsection