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

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

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

{{-- ADDITIONAL SCRIPT --}}
@push('addons-script')
<script src="{{ url('/') }}/assets/vendor/select2/js/select2.js"></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')

@endpush

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

{{-- CONTENT --}}
@section('content')
<section role="main" class="content-body">
    <x-page-layout :breadcrumbs="$bc"></x-page-layout>
    <div class="row">
        <div class="col-md-12">
            <section class="card card-featured card-featured-primary mb-4">
                @if (!$Pengguna->isEmpty())
                <header class="card-header header-elements">
                    <div class="card-actions">
                        <x-forms.button-action class="btn btn-primary btn-sm waves-effect waves-light call-modal"
                            data-url="{{ route('pengguna.create') }}"
                            data-table="{{ $table }}"
                            data-title="{{ __('lang.add_data', ['data' => __('lang.users'),]) }}" icon="fa fa-plus me-1">
                            {{ __('lang.add') }}
                        </x-forms.button-action>
                    </div>
                    <h4 class="card-title m-0 me-2">@lang('lang.list_data', ['data' => __('lang.users')])</h4>
                </header>
                @endif
                <div class="card-body">
                    @if (!$Pengguna->isEmpty())
                    <div class="table-responsive">
                        <p class="card-text mb-0">{{ __('messages.list_results') }}</p>
                        <table id="{{ $table }}" class="table table-bordered table-striped mb-0"
                            data-url="{{ route('pengguna.datatable') }}"
                            style="border-collapse:collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>{{ __('lang.name') }}</th>
                                    <th class="text-center">{{ __('lang.groups') }}</th>
                                    <th class="text-center">{{ __('lang.status') }}</th>
                                    <th class="text-center">{{ __('lang.last_login') }}</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="6" class="dataTables_empty text-center">
                                        {{ __('lang.loading_data_from_server') }}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    @else
                    <x-empty-state :messages="__('messages.empty_data')" :images="asset('assets/img/drawkit/undraw_web_search_re_efla.svg')">
                        <x-forms.button-action class="btn-primary call-modal" data-url="{{ route('pengguna.create') }}" data-table="{{ $table }}" data-title="{{ __('lang.add_data', ['data' => __('lang.users'),]) }}" icon="fa fa-plus">{{ __('lang.add') }}</x-forms.button-action>
                    </x-empty-state>
                    @endif
                </div>
            </section>
        </div>
    </div>
</section>
@endsection
