renderContentOn: html
	| names form subsystemsElementId commandsElementId commandParametersId |

	names := subsystems collect: [:aSubsystem | aSubsystem name ].

	subsystemsElementId := html nextId.	
	commandsElementId := html nextId.
	commandParametersId := html nextId.

	html heading: 'Send Command' level: 4.
	
	form := html form.
	form class: 'pure-form pure-form-aligned'.
	form with: [
		html fieldSet: [
			html div class: 'pure-control-group';
				with: [ 
				      html label: 'Subsystem: '.
					html select
						id: subsystemsElementId;
				            list: names;
				            selected:  names first;
						"update the list with ID commandListElementId, executing renderCommandListOn: ajaxHtml "
						onChange: (html scriptaculous updater 
							id: commandsElementId;
							triggerFormElement: subsystemsElementId;
			    	              callback: [ :ajaxHtml | self renderCommandListOn: ajaxHtml ]
						);
						"set the subsystem name posted by the form, then the variable subsystem will be used by renderCommandListOn: ajaxHtml to select the available commands for that subystem"			
						callback: [ :value | subsystem := self subsystemWithName: value. ].
				].
			html div class: 'pure-control-group'; id: commandsElementId;
				with: [ self renderCommandListOn: html ].
			html div class: 'pure-control-group'; id: commandParametersId;
				with: [ self renderCommandParametersOn: html ].				
			html div class: 'pure-controls';				
				with: [ html submitButton class: 'pure-button'; on: #sendCommand of: self. ].
		].
	].