@extends('layouts.app')

@section('title', __('Roles'))

@push('css')
    @include('panel.inc.datatable.css')
@endpush

@section('content')
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-auto">
                <div class="page-pretitle">
                    {{ __('Roles') }}
                </div>
                <h2 class="page-title">
                    {{ __("Manage Roles") }}
                </h2>
            </div>
            <!-- Page title actions -->
            <div class="col-auto ml-auto d-print-none">
                <div class="btn-list">
                    @can('roles-add')
                        <x-buttons.btn-add modal="roleModal" :route="route('panel.roles.modal')"/>
                    @endcan
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        {!! $dataTable->table() !!}
    </div>


@stop

@push('script')
    @include('panel.inc.datatable.js')

    {!! $dataTable->scripts() !!}

    <script !src="">
        @can('roles-delete')
        $(document).on('click', '.deleteModel', function(){
            let el = this;
            deletePopup({
                el: el,
                url: '{{ route('panel.roles.delete') }}',
                params:{
                    moduleID: $(el).data('model-id')
                },
                datatable: $('#roles-table').DataTable()
            });
        });
        @endcan
    </script>

@endpush