@extends('layouts.main')

@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">
    <div>
        <x-page-header
        >
            VIEWING TOTAL ROLES
        </x-page-header>


        <div class="d-flex justify-content-end gap-3 mb-3">

            <form id="roles-form" style="display: contents">
                <x-ui.search-field>

                </x-ui.search-field>
            </form>

            <x-ui.blue-button modal="create-role-modal">
                CREATE ROLE
            </x-ui.blue-button>
        </div>

        @include('management-permissions.partials.create-role-modal')

        <div id="listDataContainer">
            @include('management-permissions.partials.roles-list')
        </div>
    </div>
    </div>
@endsection



@push('scripts-stack')
    <script defered>
        $s = jQuery.noConflict()
        $s(document).ready(function () {
            setAjaxFilters('{{route('management-permissions.roles')}}', 'roles-form')
        });
    </script>
@endpush