@extends('layouts.office-details-layout', ['authUser' => $authUser])

@section('content')
    <!-- Zero configuration table -->
    <section class="main-content-section">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header page-title-row">
                        <h2 class="page-title-secondary nk-block-title fw-normal float-left">Office Users</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="nk-block-head-content align-self-start d-lg-none">
                    <a href="#" class="toggle btn btn-icon btn-trigger mt-n1" data-target="userAside"><em class="icon ni ni-menu-alt-r"></em></a>
                </div>
                <div class="card">
                    <div class="card-content collapse show">
                        <div class="card-body card-dashboard">
                            <table class="table table-bordered" id="users-datatable"
                                   data-source-url="{{ route('office.users_datalist', ['office' => $office->id]) }}"
                                   data-revoke-access-url="{{ url("office/{$office->id}/revoke-user-access/") }}"
                                   data-grant-access-url="{{ url("office/{$office->id}/grant-user-access/") }}"
                            >
                                <thead class="thead-dark">
                                <tr>
                                    <th>ID</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Email</th>
                                    <th>Status</th>
                                    <th>Date Created</th>
                                    <th>Actions</th>
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('more-scripts')
    <script src="{{ asset('js/pages/view_office.js') }}"></script>

@endsection