{{-- EXTENDS TEMPLATE --}}
@extends('layouts.app')

{{-- TITLE --}}
@section('title', __('lang.permissions'))

{{-- ADDITIONAL STYLE --}}
@push('addons-style')
<link rel="stylesheet" href="{{ url('/') }}/assets/vendor/select2-bootstrap-theme/select2-bootstrap.min.css" />
<link rel="stylesheet" href="{{ url('/') }}/assets/vendor/DataTables/datatables.css" />
@endpush

{{-- ADDITIONAL SCRIPT --}}
@push('addons-script')
<script src="{{ url('/') }}/assets/vendor/DataTables/datatables.js"></script>
<script src="{{ url('/') }}/assets/vendor/parsley/parsley.min.js"></script>
@endpush

{{-- CUSTOM STYLESHEET --}}
@push('custom-style')
<style>
   .table td:nth-child(1) {
        text-align: center;
        vertical-align: middle;
    }
</style>
@endpush

{{-- CUSTOM SCRIPT --}}
@push('custom-script')
<script src="{{ Module::asset('role:js/app.js') }}"></script>
@endpush

{{-- CONTENT --}}
@section('content')
<section role="main" class="content-body">
    <div class="col-sm-12">
        <x-page-layout :breadcrumbs="$bc"></x-page-layout>
        <div class="card">
            @if (!$Roles->isEmpty())
            <header class="card-header header-elements">
                <h4 class="card-title m-0 me-2">@lang('lang.list_data', ['data' => __('lang.groups')])</h4>
            </header>
            @endif
            <div class="card-body">
                @if (!$Roles->isEmpty())
                    <div class="table-responsive">
                        <x-forms.button-dropdown class="btn-primary btn-air-primary" :label="__('lang.action')">
                            <a class="dropdown-item text-1 call-modal" href="javascript:void(0)"
                                data-url="{{ route('roles.create') }}"
                                data-table="{{ $table }}"
                                data-title="{{ __('lang.add_data', ['data' => __('lang.groups'),]) }}">
                                <i class="fa fa-plus me-1"></i> {{ __('lang.add') }}
                            </a>
                            <a class="dropdown-item text-1 bulk-delete" href="javascript:void(0)"
                                data-url="{{ route('roles.bulk_delete') }}"
                                data-table="{{ $table }}"
                                data-method="post"><i class="fa fa-trash me-1"></i> {{ __('lang.delete_data_selected') }}
                            </a>
                        </x-forms.button-dropdown>
                        <p class="card-text mb-0">{{ __('messages.list_results') }}</p>
                        <x-datatable id="{{ $table }}" data-url="{{ route('roles.datatable') }}">
                            <x-slot name="thead">
                                <tr>
                                    <th width="5%"><x-forms.checkall class="checkthead" /></th>
                                    <th>{{ __('lang.name') }}</th>
                                    <th></th>
                                </tr>
                            </x-slot>
                            <tr>
                                <td colspan="3" class="dataTables_empty">
                                    {{ __('lang.loading_data_from_server') }}
                                </td>
                            </tr>
                        </x-datatable>
                    </div>
                @else
                    <x-empty-state :messages="__('messages.empty_data')" :images="asset('assets/images/drawkit/drawkit-nature-man-colour.svg')">
                        <x-forms.button-action class="btn-primary call-modal"
                        data-url="{{ route('roles.create') }}"
                        data-table="{{ $table }}"
                        data-title="{{ __('lang.add_data', ['data' => __('lang.groups'),]) }}"
                        icon="fa fa-plus">{{ __('lang.add') }}</x-forms.button-action>
                    </x-empty-state>
                @endif
            </div>
        </div>
    </div>
</section>
@endsection
