@extends('layout.admin.master-layout')
@section('additional-css')
@endsection
@section('main-content')
    @include('admin.access.roles.partials.add')
    @include('admin.access.roles.partials.view')
    <div class="pc-container">
        <div class="pc-content">
            <!-- [ breadcrumb ] start -->
            <div class="page-header">
                <div class="page-block">
                    <div class="row align-items-center">
                        <div class="col-md-12">
                            <ul class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                                <li class="breadcrumb-item" aria-current="page">{{ @$title }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-header">
                            <div class="d-flex justify-content-between">
                                <h2 class="mb-0">{{ @$title }}</h2>
                                @can('create.role')
                                    <div class="text-end">
                                        <a href="#" class="btn btn-primary d-inline-flex align-item-center"
                                           data-bs-toggle="modal" data-bs-target="#addModal">
                                            <i class="ti ti-plus f-18"></i> Add {{$title}}
                                        </a>
                                    </div>
                                @endcan
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="dt-responsive table-responsive position-relative">
                                <table id="master-table" class="display table table-hover "
                                       style="width: 100%">
                                    <thead>
                                    <tr style="">
                                        <th>S.N</th>
                                        <th>Role Name</th>
                                        <th>Display Name</th>
                                        <th>Created By</th>
                                        <th>Created Date</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                    </thead>
                                    <tbody id="tablecontents">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('additional-js')
    <script src="{{asset('assets/admin/custom/js/access/roles.js')}}"></script>
@endsection