{{-- Extends layout --}}
@extends('layout.default')

{{-- Styles Section --}}
@section('styles')
    <link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('css/custom.datatable.css') }}" rel="stylesheet" type="text/css"/>
@endsection
@section('subheaderRightToolbar')
    @PermissionsCan(groupPermissionName('cities.create'))
    <!--begin::Button-->
    <a href="{{ route('cities.create') }}" class="btn btn-primary font-weight-bolder">
        <i class="flaticon2-plus"></i>New City</a>
    <!--end::Button-->
    @endPermissionsCan
@endsection
{{-- Content --}}
@section('content')
    <div class="card card-custom">
        <div class="card-body">
            @component('_components._table', ['id' => 'cities_datatable', 'columns' => $datatableColumns])
                @slot('url')
                    {{ route('cities.datatable') }}
                @endslot
            @endcomponent
        </div>
    </div>
@endsection

{{-- Scripts Section --}}
@section('scripts')
    {{-- vendors --}}
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/global-datatable.js?v='.time()) }}" type="text/javascript"></script>
    {{-- page scripts --}}
    <script type="text/javascript" src="{{ asset('js/modules/cities/index.js') }}"></script>
@endsection