@extends('backend.layouts.master')

@section('styles')
@endsection

@section('content')
	<div class="content">

		<div id="users-datatable" class="main-content">
			<div class="block justify-between page-header sm:flex">
				<div>
					<h3 class="text-gray-700 hover:text-gray-900 dark:text-white dark:hover:text-white text-2xl font-medium">
						Data Table</h3>
				</div>
				<div>

				</div>
			</div>

			<div class="card ">
				<div class="card-header">Manage Users</div>
				<div class="card-body">

					<!-- First Users Table (Instance 1) -->
					<div>
						<h3 class="text-lg font-bold mb-2">User Table A</h3>
						<x-datatable :columns="$userColumns" data-url="{{ route('users.data') }}" base-url="{{ url('users') }}"
							export-url="{{ route('users.export') }}" :enable-export="true" :enable-bulk-delete="true" :enable-edit="true" :enable-delete="false"
							instance-key="users_a" />
					</div>

					<!-- Second Users Table (Instance 2) -->
					<div>
						<h3 class="text-lg font-bold mb-2">User Table B</h3>
						<x-datatable :columns="$userColumns" data-url="{{ route('users.data') }}" base-url="{{ url('users') }}"
							export-url="{{ route('users.export') }}" :enable-export="true" :enable-bulk-delete="true" :enable-edit="true" :enable-delete="false"
							instance-key="users_b" />
					</div>

				</div>
			</div>
		</div>
	</div>
@endsection

@section('scripts')
	<!-- Include this script in a layout or somewhere globally (after Alpine.js is loaded) -->
@endsection