@extends('layouts.main')

@once
    @push('stylesheets')
        <link rel="stylesheet" href="{{asset('css/user-list.css')}}"/>
    @endpush
@endonce

@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">

    <x-page-header>
        VIEWING TOTAL USERS ({{ $total_users_count }})
    </x-page-header>


    <div class="d-flex justify-content-between mb-5 top-actions-container">
        <div class="d-flex custom width-fix gap-3">
            <form id="users-form" style="display: contents;">
                <x-ui.search-field>

                </x-ui.search-field>

            
                <x-ui.select.filter class="justify-self-end" name="unit" id="unit" :options="$units_filter">

                </x-ui.select.filter>


                <x-ui.select.filter class="justify-self-end" name="role" id="role" :options="$roles_filter">

                </x-ui.select.filter>


            </form>
        </div>

        <div class="d-flex gap-3">
            <x-ui.blue-button  :route="route('management-users.create')">
                CREATE USER
            </x-ui.blue-button>
            @cannot('help-desk-access')
            <x-ui.blue-button modal="mass-import-modal">
                MASS IMPORT
            </x-ui.blue-button>

            @include('management-users.partials.mass-import-modal')
            @endcannot
            <x-ui.blue-button modal="mass-invite-modal">
                INVITE USERS
            </x-ui.blue-button>
        </div>

        @include('management-users.partials.mass-invite-modal')
    </div>

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

    </div>
@endsection



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