{% extends 'base.html' %}
{% set active_page = "rack" %}
{% set version2 = True %}
 
{% block container %}
	{% if current_user.is_authenticated %}
	<!--start details div-->
	<div>
		{% if current_user.is_admin(current_user) %}
		<span ng-init="initialLoad('{{locationCode}}/{{rackInfoDict['rackName']}}','devices','deviceID')"></span>
		<form editable-form name="tableform" onaftersave="saveData()" oncancel="Cancel()">
			<div class="row">
				<div class="col-sm-12">
					<!-- buttons -->
					<div class="btn-edit">
						<button type="button" class="btn btn-primary lightAccent" ng-show="!tableform.$visible" ng-click="tableform.$show()" style="background-color:orange;color:#6441A5">
							edit
						</button>
						<a ng-href="{{ url_for('data.device') }}"><button class="btn btn-primary pull-right lightAccent">back</button></a>
					</div>
					<div class="btn-form" ng-show="tableform.$visible">
						<button type="submit" ng-disabled="tableform.$waiting" class="btn btn-primary darkAccent" style="background-color:green;">save</button>
						<button type="button" ng-disabled="tableform.$waiting" ng-click="tableform.$cancel()" class="btn btn-primary darkAccent" style="background-color:red;">cancel</button>
					</div>
				</div>
			</div>
	    	<hr>
			<div ng-if="!initialData.dataLoading">
	 			<div class="panel panel-default">
			        <div class="panel-heading">
			            Rack Details
			        </div>
			        <div class="panel-body">
			        	<div class="row">
			        		<div class="col-sm-4">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.rackName)" class="fa fa-question"></span>
										<span editable-text="getData.rackName" e-form="tableform" e-required>
											{{getData.rackName|angular}}
										</span>
									</div>
									<hr>
									<div class="label">Rack Name</div>
								</div>
							</div>
							<div class="col-sm-4">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.twitch_room)" class="fa fa-question"></span>
										<span editable-text="getData.twitch_room" e-form="tableform">
											{{getData.twitch_room|angular}}
										</span>
									</div>
									<hr>
									<div class="label">Room/Cage</div>
								</div>
							</div>
			        		<div class="col-sm-4">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.locationName)" class="fa fa-question"></span>
										{{getData.locationName|angular}}
									</div>
									<hr>
									<div class="label">Location Name</div>
								</div>
							</div>
			        	</div>
			        	<div class="row">
							<div class="col-sm-3">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.uCount)" class="fa fa-question"></span>
										<span editable-text="getData.uCount" e-form="tableform">
											{{getData.uCount|angular}}
										</span>
									</div>
									<hr>
									<div class="label">Rack U Count</div>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.rackStatus)" class="fa fa-question"></span>
										<span editable-text="getData.rackStatus" e-form="tableform" e-required>
											{{getData.rackStatus|angular}}
										</span>
									</div>
									<hr>
									<div class="label">Rack Status</div>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.rackSubnet)" class="fa fa-question"></span>
										<span editable-text="getData.rackSubnet" e-form="tableform">
											{{getData.rackSubnet|angular}}
										</span>
									</div>
									<hr>
									<div class="label">Rack Subnet</div>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.rackSequenceNo)" class="fa fa-question"></span>
										<span editable-text="getData.rackSequenceNo" e-form="tableform" e-required>
											{{getData.rackSequenceNo|angular}}
										</span>
									</div>
									<hr>
									<div class="label">Rack Seq. No.</div>
								</div>
							</div>
			        	</div>
			        	<div class="row">
							<div class="col-sm-12">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.rackNotes)" class="fa fa-question"></span>
										<span editable-text="getData.rackNotes" e-form="tableform">
											{{getData.rackNotes|angular}}
										</span>
									</div>
									<hr>
									<div class="label">General Rack Notes</div>
								</div>
							</div>
						</div>
			        	<div class="row">
							<div class="col-sm-6">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.rackSecNotes)" class="fa fa-question"></span>
										<span editable-text="getData.rackSecNotes" e-form="tableform">
											{{getData.rackSecNotes|angular}}
										</span>
									</div>
									<hr>
									<div class="label">Security and Access Notes</div>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.providerRackName)" class="fa fa-question"></span>
										<span editable-text="getData.providerRackName" e-form="tableform">
											{{getData.providerRackName|angular}}
										</span>
									</div>
									<hr>
									<div class="label">Provider Rack Name</div>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.provider_room)" class="fa fa-question"></span>
										<span editable-text="getData.provider_room" e-form="tableform">
											{{getData.provider_room|angular}}
										</span>
									</div>
									<hr>
									<div class="label">Provider Room Name</div>
								</div>
							</div>
						</div>
			        	<hr>
			        	<div class="row">
							<div class="col-sm-3">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.powerFeedA)" class="fa fa-question"></span>
										<span editable-text="getData.powerFeedA" e-form="tableform"
											{{getData.powerFeedA|angular}}
										</span>
									</div>
									<hr>
									<div class="label">Power Feed A</div>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.powerFeedB)" class="fa fa-question"></span>
										<span editable-text="getData.powerFeedB" e-form="tableform">
											{{getData.powerFeedB|angular}}
										</span>
									</div>
									<hr>
									<div class="label">Power Feed B</div>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.powerFeedC)" class="fa fa-question"></span>
										<span editable-text="getData.powerFeedC" e-form="tableform">
											{{getData.powerFeedC|angular}}
										</span>
									</div>
									<hr>
									<div class="label">Power Feed C</div>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.powerFeedD)" class="fa fa-question"></span>
										<span editable-text="getData.powerFeedD" e-form="tableform">
											{{getData.powerFeedD|angular}}
										</span>
									</div>
									<hr>
									<div class="label">Power Feed D</div>
								</div>  <!-- end infobubble -->
							</div>  <!-- end column -->
						</div> <!-- end row -->
			        </div>
			    </div>
			    <hr>
			    
				<hr>
				<div class="panel panel-default">
	            	<div class="panel-heading">
	            		Devices
	            	</div>
	            	<div class="panel-body">
				    	<div class="panel panel-default">
							<!-- table -->
							<table class="table table-bordered table-striped table-hover">
								<thead>
									<tr style="font-weight: bold">
										<th style="text-decoration: underline;">Device Name</th>
										<th style="text-decoration: underline;">Serial Number</th>
										<th style="text-decoration: underline;">Device Type</th>
										<th style="text-decoration: underline;" ng-show="!tableform.$visible" width="80"><span>Tools</span></th>
										<th style="text-decoration: underline;" ng-show="tableform.$visible" width="80"><span>Action</span></th>
									</tr>
								</thead>
								<tbody>
									<tr ng-repeat="element in getData.devices | filter:filterElement">
										<td>
											<span editable-text="element.deviceName" e-form="tableform" e-required>
											{{element.deviceName|angular}}
											</span>
										</td>
										<td>
		                					<span ng-if="!element.deviceSerial" ng-show="!tableform.$visible" class="fa fa-question"></span>
											<span editable-text="element.deviceSerial" e-form="tableform" e-required>
											{{element.deviceSerial|angular}}
											</span>
										</td>
										<td>
											<span editable-select="element.deviceTypeID" onshow="loadDeviceTypes()" e-form="tableform" e-ng-options="s.deviceTypeID as s.deviceTypeName for s in deviceTypes"" ng-init="deviceTypeResult=showDeviceTypeShort(element)" e-required>
											{{element.deviceTypeName|angular}}
											{{deviceTypeResult|angular}}
											</span>
										</td>
										<td align="center" ng-show="!tableform.$visible" >
											<button type="button" ng-click="goTo('{{ url_for('data.device_details') }}?name=',element.deviceName);" class="btn btn-primary lightAccent"">
											More
											</button>
										</td>
										<td align="center" ng-show="tableform.$visible" >
											<button type="button" ng-click="deleteElement('deviceID',element.deviceID)" class="btn btn-primary darkAccent" style="background-color:red;"">
											Delete
											</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					<div class="row">
						<div class="col-sm-12">
							<div class="btn-form" ng-show="tableform.$visible">
								<span ng-disabled="tableform.$waiting" class="pull-left">Note: Deleting a device will only work if there are no interfaces tied to that device</span>
								<button type="button" ng-disabled="tableform.$waiting" ng-click="addElement()" class="btn btn-primary lightAccent pull-right">add row</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>
		<div>
			<!-- Insert function to create rack layout - create statically? via jinja? -->
		</div>
		<div class="row" ng-if="initialData.dataLoading">
             <div class="col-md-2 col-md-offset-5" style="text-align:center">
				<i class="fa fa-refresh fa-spin"></i>
			</div>
		</div>


	    {% else %}
	    {% endif %}
	</div>
	{% else %}
	<div class="jumbotron">
		<h3>Authorized Access Only</h3>
		<h4><a href="{{ url_for('auth.login') }}">Click Here To Login</a></h4>
	</div>
	{% endif %}
{% endblock %}
{% block scripts %}
{% endblock %}