<div ng-if="loading" class="container">
	<div class="row">
		<div class="col-md-12 well" style="text-align:center;">
			<h1>Loading Config...</h1>
			<img class="img-responsive" src="/images/loading.gif"  style="margin:0 auto;"/>
		</div>
	</div>
</div>

<div ng-if="!loading">
	<div ng-if="error" class="container">
		<div class="row">
			<div class="col-md=12">
				<h1>Error Caught!</h1>
				<pre>{{message}}</pre>
				<button ng-click="loadDashboard()" class="btn btn-large btn-danger"><i class="fa fa-refresh"></i> Reload Dashboard</button>
			</div>
		</div>
	</div>

	<div ng-if="!error" class="container">
		<div class="row well">
			<div class="col-md-12">
				<h1 ng-if="!loggerLoading">Logger Status:
					<span ng-if="loggerRunning" class="label label-success">Running</span>
					<span ng-if="!loggerRunning" class="label label-danger">Not Running</span>
				</h1>
				<h1 ng-if="loggerLoading">
					<span class="label label-warning">Checking Logger Status...</span>
				</h1>
				<button class="btn btn-primary btn-large" ng-click="checkLogger()">Check Logger</button> <button class="btn btn-warning btn-large" ng-click="restartLogger()">Restart Logger</button>
			</div>
		</div>

		<div class="row">
			<div class="col-md-6">
				<h1>Devices</h1>
				<button ng-click="getDevices()" class="btn btn-large btn-success"><i class="fa fa-refresh"></i> Reload Devices</button>
				<table class="table">
					<thead>
						<tr>
							<!-- <th>ID</th> -->
							<th>Address</th>
							<th>Type</th>
							<!-- <th></th> -->
							<th></th>
						</tr>
					</thead>

					<tbody>
						<tr ng-repeat="device in devices">
							<!-- <td>{{device.id}}</td> -->
							<td>{{device.address}}</td>
							<td>{{device.device_type.dType}}</td>
							<!-- <td><i class="fa fa-pencil"></i></td> -->
							<td><i class="fa fa-times" ng-click="deleteDevice(device.id)"></i></td>
						</tr>
					</tbody>
				</table>
			</div>

			<div class="col-md-6">
				<h1>Configuration Parameters</h1>
				<button ng-click="loadConfig()" class="btn btn-large btn-success"><i class="fa fa-refresh"></i> Reload Config</button>
				<table class="table">
					<thead>
						<tr>
							<th>Parameter</th>
							<th>Value</th>
							<!-- <th></th> -->
							<th></th>
						</tr>
					</thead>

					<tbody>
						<tr ng-repeat="param in config">
							<td>{{param.parameter}}</td>
							<td>{{param.val}}</td>
							<!-- <td><i class="fa fa-pencil"></i></td> -->
							<td><i class="fa fa-times" ng-click="deleteParameter(param.id)"></i></td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<h2>New Device</h2>
				<form>
					<div class="form-group">
						<label for="ip_address">IP Address</label>
						<input type="text" class="form-control" id="ip_address" ng-model="newDevice.address" placeholder="###.###.###.###">
					</div>

					<div class="form-group">
						<label for="device_type">Device Type</label>
						<select ng-model="newDevice.device_type" ng-options="t as t.dType for t in device_types track by t.id" class="form-control" id="device_type"></select>
					</div>

					<button class="btn btn-primary" ng-click="addDevice(newDevice)">Add Device</button>
				</form>
			</div>

			<div class="col-md-6">
				<h2>New Parameter</h2>
				<form>
					<div class="form-group">
						<label for="pSelected">Parameter</label>
						<select class="form-control" id="pSelected" ng-model="newParam.pSelected">
							<option value="ip_address">PLC IP Address</option>
							<option value="scan_rate">Scan Rate</option>
							<option value="other">Other</option>
						</select>
					</div>

					<div class="form-group" ng-if="newParam.pSelected=='other'">
						<label for="pEntry">Parameter Entry</label>
						<input type="text" class="form-control" id="val" ng-model="newParam.pEntry" placeholder="Parameter Name">
					</div>

					<div class="form-group">
						<label for="val">Value</label>
						<input type="text" class="form-control" id="val" ng-model="newParam.val" placeholder="Parameter Value">
					</div>

					<button class="btn btn-primary" ng-click="addParameter()">Set Parameter</button>
				</form>
			</div>
		</div>
	</div>
</div>
