
<ul id="sensor-tabs" class="nav nav-tabs" role="tablist" style="margin-bottom:1em;">
	<li class="tab active" data-tab="sensor-config"><a href="#">Configuration</a></li>
	<li class="tab" data-tab="sensor-metadata"><a href="#">Metadata</a></li>
	<li class="tab" data-tab="sensor-command"><a href="#">Command</a></li>
</ul>

<div id="sensor-config" data-bind="with: activeSensor">

	<!-- ko if: updateError -->
	<div class="alert alert-danger" data-bind="text: updateError"></div>
	<!-- /ko -->



	<form class = "form-horizontal" role="form">

        <div class="form-group">
            <label class="col-md-2 control-label">UUID</label>
            <div class="col-md-4">
                <p class="form-control-static" data-bind="text: uuid()"></p>
            </div>
        </div>

        <div class="form-group">
            <label class="col-md-2 control-label">Model</label>
            <div class="col-md-4">
                <p class="form-control-static" data-bind="text: model()"></p>
            </div>
        </div>

		<div class = "form-group" data-bind="css: {'has-error': name.hasError}">

			<label class="col-md-2 control-label">Name</label>
			<div class="col-md-4">
				<!-- ko ifnot: editing -->
				<p class="form-control-static" data-bind="text: name()"></p>
				<!-- /ko -->
				<!-- ko if: editing -->
				<input class="form-control" data-bind="value: name">
				<p class="text-danger" data-bind="text: name.validationMessage, if: name.hasError"></p>
				<!-- /ko -->
			</div>
		</div>
		<div class = "form-group">
			<label class="col-md-2 control-label">Description</label>
			<div class="col-md-4">
				<!-- ko ifnot: editing -->
				<p class="form-control-static" data-bind="text: description()"></p>
				<!-- /ko -->
				<!-- ko if: editing -->
				<input class="form-control" data-bind="value: description">
				<!-- /ko -->
			</div>
		</div>
		<div class = "form-group">
			<label class="col-md-2 control-label">Units</label>
			<div class="col-md-4">
				<!-- ko ifnot: editing -->
				<p class="form-control-static" data-bind="text: units()"></p>
				<!-- /ko -->
				<!-- ko if: editing -->
				<input class="form-control" data-bind="value: units">
				<!-- /ko -->
			</div>
		</div>
		<div class = "form-group">
			<label class="col-md-2 control-label">Calibration</label>
			<div class="col-md-4">
				<!-- ko ifnot: editing -->
				<p class="form-control-static" data-bind="text: coefficients()"></p>
				<!-- /ko -->
				<!-- ko if: editing -->
				<input class="form-control" data-bind="value: coefficients">
				<!-- /ko -->
			</div>
		</div>

		<div class = "form-group">
			<div class="col-md-6 col-md-offset-2">
				<!-- ko ifnot: editing -->
				<button type="button" class="btn btn-primary btn-sm" data-bind="click: beginEditing">
					<span class="glyphicon glyphicon-pencil"></span> Edit
				</button>
				<!-- /ko -->

				<!-- ko if: editing -->
				<button type="button" class="btn btn-primary btn-sm" data-bind="click: update">
					<span class="glyphicon glyphicon-ok"></span> Save
				</button>
				<button type="button" class="btn btn-default btn-sm" data-bind="click: cancelEditing">
					<span class="glyphicon glyphicon-remove"></span> Cancel
				</button>

				<!-- /ko -->
			</div>
		</div>
	</form>
</div>

<div id="sensor-metadata" class="hidden" data-bind="with: activeSensor">
	<ul data-bind="metadata: meta_data"></ul>
</div>

<div id="sensor-command" class="hidden" data-bind="with: activeSensor">
	<!-- ko if: updateError -->
	<div class="alert alert-danger" data-bind="text: updateError"></div>
	<!-- /ko -->
	<form class = "form-horizontal" role="form">

		<div class = "form-group form-group-sm" >
			<label class="col-md-2 control-label" data-bind="text: name"></label>

			<!-- ko ifnot: isInput -->
			<p class="form-control-static" > Output Sensor</p>
			<!-- /ko -->
			<!-- ko if: sensor_type == "bool" -->
			<div class = "col-md-1" style="height: 30px">
				<input class="form-control" type="checkbox" data-bind="bootstrapSwitchOn: command_value">
			</div>
			<!-- /ko -->
			<!--ko ifnot: sensor_type == "bool"-->
			<label class="col-md-2 control-label">Value:</label>
			<div class="col-md-4">
			<input class="form-control" data-bind="value: temp_command_value">
			<p class="text-danger" data-bind="text: temp_command_value.validationMessage, if: temp_command_value.hasError"></p>
			<button type="button" class="btn btn-primary btn-sm" data-bind="click: sendCommand">
				<span class="glyphicon glyphicon-send"></span> Send
			</button>
			<!-- /ko -->
			</div>


		</div>
	</form>


	</div>
</div>

