@extends('layout/ace')

@section('breadcrumbs')
    {{ Breadcrumbs::render('Uloge') }}
@endsection

@section('title')
    Pregled Uloga
@endsection

@section('content')
    <a href="{{ route('cms.role.create') }}" class="btn btn-primary">Nova uloga</a>

    <x-input label="ID" name="id" id="id" popovercontent="Pretraga po ID-u" value=""></x-input>
    <x-input label="Ime" name="name" id="name" popovercontent="Pretraga po imenu" value=""></x-input>

    <x-run-tabulator-filters>
        <x-slot name='run_filter_id'>run-filter-roles</x-slot>
        <x-slot name='reset_table_id'>reset-table-roles</x-slot>
    </x-run-tabulator-filters>

    <div id="roles-table" class="mt-5"></div>
@endsection

@section('scripts')
    @parent
    <script>
        let rolesAjaxURL = "{!! url()->current() !!}";
        let rolesInitialSort = [
            {column:"id", dir:"asc"},
        ];
        let rolesColumns = [
            {title:"ID", field:"id"},
            {title:"Ime", field:"name"},
            {title:"Napravljeno", field:"created_at"},
            {title:"Izmenjeno", field:"updated_at"},
            {title:"Akcije", field:"actions", headerSort: false, formatter: 'html'},
        ];
        let rolesFilterIds = ['id','name'];

        initTabulator(
            'roles-table',
            rolesAjaxURL,
            rolesInitialSort,
            rolesColumns,
            'run-filter-roles',
            'reset-table-roles',
            rolesFilterIds
        );
    </script>
@endsection