@extends('layouts.app')

@section('title', 'Usuarios')

@section('content')
<x-mainCard>
	<x-slot:title>Usuarios</x-slot:title>

	<x-slot:actionButtons>
		<button type="button" id="abrirModalRegistrarUsuario" class="btn btn-primary" data-bs-toggle="modal"
			href="#modalCrearUsuario" role="button">
			<i class="bi bi-plus-lg me-2 fs-5"></i>
			Crear nuevo usuario
		</button type="button">
	</x-slot:actionButtons>

	<div class="table-responsive">
		<table id="tabla_usuarios" class="table table-striped table-sm table-hover">
			<thead>
				<tr>
					<th scope="col">Nombre</th>
					<th scope="col">Nombre de usuario</th>
					<th scope="col">Correo</th>
					<th scope="col">Rol</th>
					<th scope="col">Acciones</th>
				</tr>
			</thead>
			<tbody>

			</tbody>
		</table>
	</div>
</x-mainCard>

@include('usuarios.modal_crear_usuario')
@include('usuarios.modal_editar_usuario')

@endsection

@push('scripts')
	@vite([
		'resources/js/usuarios/registrarUsuario.js',
		'resources/js/usuarios/editarUsuario.js'
	])
@endpush