<div>
    <h3>Gestión de Usuarios</h3>

    @if (session()->has('message'))
        <div class="alert alert-success">{{ session('message') }}</div>
    @endif

    <form wire:submit.prevent="{{ $modoEdicion ? 'actualizar' : 'guardar' }}">
        <div class="mb-2">
            <input type="text" class="form-control" placeholder="Nombre" wire:model="name">
            @error('name') <span class="text-danger">{{ $message }}</span> @enderror
        </div>

        <div class="mb-2">
            <input type="email" class="form-control" placeholder="Correo" wire:model="email">
            @error('email') <span class="text-danger">{{ $message }}</span> @enderror
        </div>

        @if (!$modoEdicion)
        <div class="mb-2">
            <input type="password" class="form-control" placeholder="Contraseña" wire:model="password">
            @error('password') <span class="text-danger">{{ $message }}</span> @enderror
        </div>
        @endif

        <div class="mb-3">
            <label for="rol" class="form-label">Rol</label>
            <select name="rol" id="rol" class="form-control" wire:model="rol" required>
                <option value="">Seleccione un rol</option>
                @foreach(\Spatie\Permission\Models\Role::all() as $role)
                    <option value="{{ $role->name }}">{{ ucfirst($role->name) }}</option>
                @endforeach
            </select>
            @error('rol') <span class="text-danger">{{ $message }}</span> @enderror
        </div>



        <div class="mb-3">
            <button class="btn btn-primary" type="submit">
                {{ $modoEdicion ? 'Actualizar' : 'Guardar' }}
            </button>
            @if($modoEdicion)
                <button type="button" wire:click="cancelar" class="btn btn-secondary">Cancelar</button>
            @endif
        </div>
    </form>

    <table class="table table-bordered">
        <thead class="table-dark">
            <tr>
                <th>Nombre</th>
                <th>Correo</th>
                <th>Acciones</th>
            </tr>
        </thead>
        <tbody>
            @foreach($usuarios as $user)
                <tr>
                    <td>{{ $user->name }}</td>
                    <td>{{ $user->email }}</td>
                    <td>
                        <button wire:click="editar({{ $user->id }})" class="btn btn-sm btn-info">Editar</button>
                        <button wire:click="eliminar({{ $user->id }})" class="btn btn-sm btn-danger"
                                onclick="return confirm('¿Eliminar este usuario?')">Eliminar</button>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <div class="d-flex justify-content-center">
        {{ $usuarios->links() }}
    </div>
</div>
