{% extends 'base.html' %}
{% set active_page = "device" %}
{% 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('{{locationDict[rackDict[deviceInfoDict['rackID']][0]]}}/{{rackDict[deviceInfoDict['rackID']][1]}}/{{deviceInfoDict['deviceName']}}','interfaces','intID')"></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">
			            Device Details
			        </div>
			        <div class="panel-body">
			            <div class="row">
			                <div class="col-sm-3">
			                    <div class="infobubble">
		                    		<div class="value">
		                    			<span editable-text="getData.deviceName" e-name="deviceName" e-required onbeforesave="checkEmptyText(getData.deviceName,'Device Name')">{{ getData.deviceName|angular}}</span>
		                    		</div>
		                    		<hr>
		                    		<div class="label">
		                    			DEVICE NAME
		                    		</div>
		                    	</div>
			                </div>
			                <div class="col-sm-2">
			                	<div class="infobubble">
			                		<div class="value">
				                		{%- if deviceInfoDict['rackID'] == false or deviceInfoDict['rackID'] == 'None' %}
				                		<span class="fa fa-question"></span>
				                		{% else %}
				                			{{rackDict[deviceInfoDict['rackID']][1]}}
				                		{% endif %}
			                		</div>
			                		<hr>
			                		<div class="label">
			                			Rack Name
			                		</div>
			                	</div>
			                </div>
			                <div class="col-sm-2">
			                	<div class="infobubble">
			                		<div class="value">
				                		{%- if deviceInfoDict['rackID'] == false or deviceInfoDict['rackID'] == 'None' %}
				                		<span class="fa fa-question"></span>
				                		{% else %}
				                			{{locationDict[rackDict[deviceInfoDict['rackID']][0]]}}
				                		{% endif %}
			                		</div>
			                		<hr>
			                		<div class="label">
			                			Location Name
			                		</div>
			                	</div>
			                </div>
			                <div class="col-sm-2">
			                	<div class="infobubble">
			                		<div class="value">
		                    			<span editable-text="getData.uStart" e-name="uStart">{{ getData.uStart|angular}}</span>
			                		</div>
			                		<hr>
			                		<div class="label">
			                			Starting U Level
			                		</div>
			                	</div>
			                </div>
			                <div class="col-sm-3">
			                	<div class="infobubble">
			                		<div class="value">
		                    			<span editable-text="getData.deviceSerial" e-name="deviceSerial">{{ getData.deviceSerial|angular}}</span>
			                		</div>
			                		<hr>
			                		<div class="label">
			                			Serial Number
			                		</div>
			                	</div>
			                </div>
			            </div>
			            <div class="row">
			                <div class="col-sm-12">
			                	<div class="infobubble">
			                		<div class="value">
			                			<span ng-if="!getData.deviceNote" ng-show="!tableform.$visible" class="fa fa-question"></span>
		                    			<span editable-text="getData.deviceNote" e-name="deviceNote">{{ getData.deviceNote|angular}}</span>
			                		</div>
			                		<hr>
			                		<div class="label">
			                			Device Notes
			                		</div>
			                	</div>
			                </div>

			            </div>
			        </div>
			    </div>
			    <hr>
			    <div class="panel panel-default">
			        <div class="panel-heading">
			            Device Type Details
			        </div>
			        <div class="panel-body">
				        <span editable-select="getData.deviceTypeID" onshow="loadDeviceTypes()" e-form="tableform" e-ng-options="s.deviceTypeID as s.deviceTypeName for s in deviceTypes"" ng-init="showDeviceType(getData)" e-required>
				            <div class="row">
				                <div class="col-sm-3">
				                	<div class="infobubble">
				                		<div class="value">
											{{getData.deviceRole|angular}}
				                		</div>
				                		<hr>
				                		<div class="label">
				                			Device Type
				                		</div>
				                	</div>
				                </div>
				                <div class="col-sm-2">
				                	<div class="infobubble">
				                		<div class="value">
			                			<span ng-if="!getData.deviceMake" ng-show="!tableform.$visible" class="fa fa-question"></span>
											{{getData.deviceMake|angular}}
				                		</div>
				                		<hr>
				                		<div class="label">
				                			Device make
				                		</div>
				                	</div>
				                </div>
				                <div class="col-sm-3">
				                	<div class="infobubble">
				                		<div class="value">
			                			<span ng-if="!getData.deviceModel" ng-show="!tableform.$visible" class="fa fa-question"></span>
											{{getData.deviceModel|angular}}
				                		</div>
				                		<hr>
				                		<div class="label">
				                			Device Model
				                		</div>
				                	</div>
				                </div>
				                <div class="col-sm-2">
				                	<div class="infobubble">
				                		<div class="value">
			                			<span ng-if="!getData.softwareVersion" ng-show="!tableform.$visible" class="fa fa-question"></span>
											{{getData.softwareVersion|angular}}
				                		</div>
				                		<hr>
				                		<div class="label">
				                			software
				                		</div>
				                	</div>
				                </div>
				                <div class="col-sm-2">
				                	<div class="infobubble">
				                		<div class="value">
			                			<span ng-if="!getData.uHeight" ng-show="!tableform.$visible" class="fa fa-question"></span>
											{{getData.uHeight|angular}}
				                		</div>
				                		<hr>
				                		<div class="label">
				                			U Height
				                		</div>
				                	</div>
				                </div>
				            </div>
						</span>
			        </div>
			    </div>
				<hr>
				<div class="panel panel-default">
	            	<div class="panel-heading">
	            		Interfaces
	            	</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;">Interface Name</th>
										<th style="text-decoration: underline;">Interface Type</th>
										<th style="text-decoration: underline;">IPv4 Address</th>
										<th style="text-decoration: underline;">Interface Label</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.interfaces | filter:filterElement">
										<td>
											<span editable-text="element.intName" e-form="tableform" e-required> <!-- onbeforesave="checkEmptyText(element.intName,'Int Name')">-->
											{{element.intName|angular}}
											</span>
										</td>
										<td>
											<span editable-select="element.intType" e-form="tableform" e-ng-options="s.value as s.text for s in static.intTypes" ng-init="intTypeResult = showIntType(element)" e-required>
											{{intTypeResult|angular}}
											</span>
										</td>
										<td>
		                					<span ng-if="!element.ipv4address" ng-show="!tableform.$visible" class="fa fa-question"></span>
											<span editable-text="element.ipv4address" e-form="tableform" onbeforesave="checkIPAddress(element.ipv4address)">
											{{element.ipv4address|angular}}
											</span>
										</td>
										<td>
											<span editable-text="element.intLabel" e-form="tableform">
											{{element.intLabel|angular}}
											</span>
										</td>
										<td align="center" ng-show="!tableform.$visible" >
											<button type="button" ng-click="goTo('{{ url_for('data.interface_details') }}?intID=',element.intID);" class="btn btn-primary lightAccent"">
											More
											</button>
										</td>
										<td align="center" ng-show="tableform.$visible" >
											<button type="button" ng-click="deleteElement('intID',element.intID)" 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">
								<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 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 %}


		<div class="row">
	        <div class="col-sm-12">
	            <a ng-href="{{ url_for('data.device') }}"><button class="btn btn-primary pull-right lightAccent">back</button></a>
	        </div>
	    </div>
	    <br>
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            Device Details
	        </div>
	        <div class="panel-body">
	            <div class="row">
	                <div class="col-sm-4">
	                    <div class="infobubble">
                    		<div class="value">{% if deviceInfoDict['deviceName'] == false or deviceInfoDict['deviceName'] == 'None' %}
                    		<span class="fa fa-question"></span>
                    		{% endif %}
                    			{{deviceInfoDict['deviceName']}}
                    		</div>
                    		<hr>
                    		<div class="label">
                    			DEVICE NAME
                    		</div>
                    	</div>
	                </div>
	                <div class="col-sm-2">
	                	<div class="infobubble">
	                		<div class="value">
		                		{%- if deviceInfoDict['rackID'] == false or deviceInfoDict['rackID'] == 'None' %}
		                		<span class="fa fa-question"></span>
		                		{% else %}
		                			{{rackDict[deviceInfoDict['rackID']][1]}}
		                		{% endif %}
	                		</div>
	                		<hr>
	                		<div class="label">
	                			Rack Name
	                		</div>
	                	</div>
	                </div>
	                <div class="col-sm-2">
	                	<div class="infobubble">
	                		<div class="value">
		                		{%- if deviceInfoDict['rackID'] == false or deviceInfoDict['rackID'] == 'None' %}
		                		<span class="fa fa-question"></span>
		                		{% else %}
		                			{{locationDict[rackDict[deviceInfoDict['rackID']][0]]}}
		                		{% endif %}
	                		</div>
	                		<hr>
	                		<div class="label">
	                			Location Name
	                		</div>
	                	</div>
	                </div>
	                <div class="col-sm-2">
	                	<div class="infobubble">
	                		<div class="value">
		                		{%- if deviceInfoDict['deviceTypeID'] == false or deviceInfoDict['deviceTypeID'] == 'None' -%}
		                		<span class="fa fa-question"></span>
		                		{%- else -%}
		                			{{deviceTypeDict[deviceInfoDict['deviceTypeID']][0]}}
		                		{%- endif -%}
	                		</div>
	                		<hr>
	                		<div class="label">
	                			Device Role
	                		</div>
	                	</div>
	                </div>
	                <div class="col-sm-2">
	                	<div class="infobubble">
	                		<div class="value">
		                		{%- if deviceInfoDict['deviceSerial'] == false or deviceInfoDict['deviceSerial'] == 'None' -%}
		                		<span class="fa fa-question"></span>
		                		{%- else -%}
		                			{{deviceInfoDict['deviceSerial']}}
		                		{%- endif -%}
	                		</div>
	                		<hr>
	                		<div class="label">
	                			Serial Number
	                		</div>
	                	</div>
	                </div>
	            </div>
	            <div class="row">
	            </div>
	        </div>
	    </div>
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            Interfaces
	        </div>
	        <div class="panel-body" style="overflow:auto;">
	        	{% for interface in intInfoArrayDict %}
	        	<div class="row">
                    <div class="col-sm-12">
	        			<div class="infobubble fixed inner">
	                		<div class="value">
	        					<a href="{{ url_for('data.interface_details') }}?intID={{interface['intID']}}">
	        					{{interface['intName']}}
	        					</a>
	        				</div>
	        				<hr>
	        				<div class="label">
	        					Interface Name
	        				</div>
	        			</div>
	        			<div class="infobubble fixed left">
	        				<div class="value">
	        					{{interface['intType']}}
	        				</div>
	        				<hr>
	        				<div class="label">
	        					Interface Type
	        				</div>
	        			</div>
	        			{% if interface['intType'] == 'physical:serial' %}
	        			<div class="infobubble  inner">
	                		<div class="value">
	        					{%- if interface['ipv4address'] == false or interface['ipv4address'] == '' or interface['ipv4address'] == 'None' -%}
		                		<span class="fa fa-question"></span>
		                		{%- else -%}
	        					{{interface['ipv4address']}}
		                		{%- endif -%}
	        				</div>
	        				<hr>
	        				<div class="label">
	        					IPv4 Address
	        				</div>
	        			</div>
	        			{% endif %}
	        			{% if interface['intType'] == 'logical:mgmt' %}
	        			<div class="infobubble  inner">
	                		<div class="value">
	        					{%- if interface['ipv4address'] == false or interface['ipv4address'] == '' or interface['ipv4address'] == 'None' -%}
		                		<span class="fa fa-question"></span>
		                		{%- else -%}
	        					{{interface['ipv4address']}}
		                		{%- endif -%}
	        				</div>
	        				<hr>
	        				<div class="label">
	        					IPv4 Address
	        				</div>
	        			</div>
	        			{% else %}
	        			<div class="infobubble  inner">
	                		<div class="value">
	        					{%- if interface['intLabel'] == false or interface['intLabel'] == '' or interface['intLabel'] == 'None' -%}
		                		<span class="fa fa-question"></span>
		                		{%- else -%}
	        					{{interface['intLabel']}}
		                		{%- endif -%}
	        				</div>
	        				<hr>
	        				<div class="label">
	        					Interface Label
	        				</div>
	        			</div>
	        			{% endif %}
	        			<div class="infobubble right">
	        				<div class="value">
	        					{%- if interface['intNote'] == false or interface['intNote'] == '' or interface['intNote'] == 'None' -%}
		                		<span class="fa fa-question"></span>
		                		{%- else -%}
	        					{{interface['intNote']}}
		                		{%- endif -%}
	        				</div>
	        				<hr>
	        				<div class="label">
	        					Interface Notes
	        				</div>
	        			</div>
	        		</div>
	        	</div>
	        	{% endfor %}
	        </div>
	    </div>
	    {% 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 %}