{% extends 'base.html' %}
{% set active_page = "management" %}
{% set version2 = False %}
 
{% block container %}
	{% if current_user.is_authenticated %}
	<!--start ADD div-->
	<div>

		<!-- start modal for add confirmation-->
		<div id="submitModal" class="modal fade" role="dialog">
		  <div class="modal-dialog">
			<div class="modal-content">
			  <div class="modal-header" style="background-color:orange;color:black;border-top-left-radius:6px;border-top-right-radius:6px;">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<div style="text-aligh:center;font-weight:strong;">
				  PROPOSED CHANGES
				</div>
			  </div>
			  <div class="modal-body">
				<div class="row">
					<div class="col-md-6 col-md-offset-3">
						<div style="margin:0px auto;">
							<ul>
								<li ng-repeat="(key,value) in deviceData" style="list-style-type:none">
									{{key|angular}}: <strong>{{value|angular}}</strong>
								</li>
							</ul>
						</div>
					</div>
				</div>
			  </div>
			  <div class="modal-footer">
				<button class="btn btn-primary pull-left" style="background-color:red;" data-dismiss="modal">Cancel</button>
				<button class="btn btn-primary pull-right" style="background-color:green;" data-dismiss="modal">Confirm</button>
			  </div>
			</div>
		  </div>
		</div>
		<!-- end modal -->

		<!-- form for required fields -->
		<div class="panel panel-default">
			<div class="panel-heading">Add New Device - Required Fields</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-sm-4">
						<label for="deviceName">Name:</label>
						<input id="deviceName" type="text" class="form-control" placeholder="name.location" ng-model="deviceData['deviceName']">
					</div>
					<div class="col-sm-4">
						<label for="deviceSerial">Serial:</label>
						<input id="deviceSerial" type="text" class="form-control" placeholder="A8434224" ng-model="deviceData['deviceSerial']" >
					</div>
					<div class="col-sm-2">
						<label for="deviceStatus">Status:</label>
						<input id="deviceStatus" type="text" class="form-control" placeholder="current" ng-model="deviceData['deviceStatus']" >
					</div>
				</div> <!-- end row -->
				<br>
				<div class="row">
					<div class="col-sm-3">
						<label for="locValue">Location:</label>
						<select class="form-control" id="locValue" ng-model="deviceData['locationID']" value="select">
							<option ng-if="!deviceData['locationID']" selected="selected">SELECT</option>
							{% for ID, CODE in locationDict.iteritems() %}
							<option value="{{ID}}">{{CODE}}</option>
							{% endfor %}
						</select>
					</div>
					<div class="col-sm-3">
						<label for="rackValue">Rack:</label>
						<select class="form-control" id="rackValue" ng-model="deviceData['rackID']">
							<option ng-if="!deviceData['locationID']" selected="selected">SELECT LOCATION FIRST</option>
							{% for rackID, INFO in rackDict.iteritems() %}
							<option ng-if="deviceData['locationID']=='{{INFO[0]}}'" value="{{rackID}}">{{INFO[1]}}</option>
							{% endfor %}
						</select>
					</div>
					<div class="col-sm-3">
						<label for="roleValue">Role:</label>
						<select class="form-control" id="roleValue" ng-model="deviceData['deviceRole']">
							<option ng-if="!deviceData['deviceRole']" selected="selected">SELECT</option>
							{% for role in deviceRoleList %}
							<option value="{{role}}">{{role}}</option>
							{% endfor %}
						</select>
					</div>
					<div class="col-sm-3">
						<label for="typeValue">Type:</label>
						<select class="form-control" id="typeValue" ng-model="deviceData['deviceTypeID']">
							<option ng-if="!deviceData['deviceRole']" selected="selected">SELECT ROLE FIRST</option>
							{% for typeID, typeINFO in deviceTypeDict.iteritems() %}
							<option ng-if="deviceData['deviceRole']=='{{typeINFO[0]}}'" value="{{typeID}}">{{typeINFO[1]}}</option>
							{% endfor %}
						</select>
					</div>
				</div> <!-- end row -->
			</div>
		</div>
		<!-- end required fields -->

		<!-- form for optional fields -->
		<div class="panel panel-default">
			<div class="panel-heading">Optional Fields</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-sm-2">
						<label for="uStart">Starting U:</label>
						<input id="uStart" type="text" class="form-control" placeholder="5" ng-model="deviceData['uStart']" pattern="pattern.uNumber">
					</div>
					<div class="col-sm-2">
						<label for="deviceSequenceNo">Seq No:</label>
						<input id="deviceSequenceNo" type="text" class="form-control" placeholder="1" ng-model="deviceData['deviceSequenceNo']" >
					</div>
				</div> <!-- end row -->
				<br>
				<div class="row">
					<div class="col-sm-12">
						<label for="noteValue">Notes:</label>
						<input id="noteValue" type="text" class="form-control" placeholder="Type any notes here.." ng-model="deviceData['deviceNote']">
					</div>
				</div> <!-- end row -->
			</div>
		</div>
		<!-- end optional fields -->

		<!-- form for interfaces -->
		<div class="panel panel-default">
			<div class="panel-heading">Interfaces</div>
				<div class="panel-body" ng-init='gen.expandCounter=0'>
					<div ng-repeat="i in getNumber(gen.expandCounter) track by $index">
						<hr ng-if="gen.expandCounter>1 && $index > 0" style="border-top: 1px solid #6441A5;">
						<div class="row">
							<!-- selector for int type -->
							<div class="col-sm-3">
								<label for="intTypeValue">Int Type:</label>
								<select class="form-control" id="intTypeValue" ng-model="intData[$index+1]['intType']">
									<option ng-if="!intData[$index+1]['intType']" selected="selected">SELECT</option>
									{% for type in intTypeList %}
									<option value="{{type}}">{{type}}</option>
									{% endfor %}
								</select>
							</div>

							<!-- type specific values to fill in -->

							<!-- management interfaces -->
							<div class="col-sm-2" ng-if="intData[$index+1]['intType']=='logical:mgmt'">
								<label for="intName">Name:</label>
								<input id="intName" type="text" class="form-control" placeholder="con" ng-model="intData[$index+1]['intName']">
							</div>
							<div class="col-sm-2" ng-if="intData[$index+1]['intType']=='logical:mgmt'">
								<label for="ipv4Addy">IP Address:</label>
								<input id="ipv4Addy" type="text" class="form-control" placeholder="10.17.0.236" ng-model="intData[$index+1]['ipv4address']">
							</div>

							<!-- sensor interfaces -->
							<div class="col-sm-2" ng-if="intData[$index+1]['intType']=='physical:sensor'">
								<label for="intName">Name:</label>
								<input id="intName" type="text" class="form-control" placeholder="con" ng-model="intData[$index+1]['intName']">
							</div>

							<!-- power interfaces -->
							<div class="col-sm-2" ng-if="intData[$index+1]['intType']=='physical:power'">
								<label for="intName">Name:</label>
								<input id="intName" type="text" class="form-control" placeholder="PS1" ng-model="intData[$index+1]['intName']">
							</div>

							<!-- data interfaces -->
							<div class="col-sm-2" ng-if="intData[$index+1]['intType']=='physical:data'">
								<label for="intName">Name:</label>
								<input id="intName" type="text" class="form-control" placeholder="NET1" ng-model="intData[$index+1]['intName']">
							</div>
							<div class="col-sm-2" ng-if="intData[$index+1]['intType']=='physical:data'">
								<label for="connectorType">Connector:</label>
								<input id="connectorType" type="text" class="form-control" placeholder="SFP+" ng-model="intData[$index+1]['connectorType']">
							</div>

							<!-- serial interfaces -->
							<div class="col-sm-2" ng-if="intData[$index+1]['intType']=='physical:serial'">
								<label for="intName">Name:</label>
								<input id="intName" type="text" class="form-control" placeholder="s1" ng-model="intData[$index+1]['intName']">
							</div>
							<div class="col-sm-2" ng-if="intData[$index+1]['intType']=='physical:serial'">
								<label for="intLabel">Label:</label>
								<input id="intLabel" type="text" class="form-control" placeholder="br01" ng-model="intData[$index+1]['intLabel']">
							</div>
							<div class="col-sm-2" ng-if="intData[$index+1]['intType']=='physical:serial'">
								<label for="ipv4Addy">IP Address:</label>
								<input id="ipv4Addy" type="text" class="form-control" placeholder="10.17.0.236" ng-model="intData[$index+1]['ipv4address']">
							</div>
							<div class="col-sm-2" ng-if="intData[$index+1]['intPosition']=='physical:serial'">
								<label for="ipv4Addy">IP Address:</label>
								<input id="ipv4Addy" type="text" class="form-control" placeholder="10.17.0.236" ng-model="intData[$index+1]['ipv4address']">
							</div>

							<!-- console interfaces -->
							<div class="col-sm-2" ng-if="intData[$index+1]['intType']=='physical:console'">
								<label for="intName">Name:</label>
								<input id="intName" type="text" class="form-control" placeholder="con" ng-model="intData[$index+1]['intName']">
							</div>

							<!-- outlet interfaces -->
							<div class="col-sm-2" ng-if="intData[$index+1]['intType']=='physical:outlet'">
								<label for="intName">Name:</label>
								<input id="intName" type="text" class="form-control" placeholder="AA1" ng-model="intData[$index+1]['intName']">
							</div>
							<div class="col-sm-2" ng-if="intData[$index+1]['intType']=='physical:outlet'">
								<label for="intLabel">Label:</label>
								<input id="intLabel" type="text" class="form-control" placeholder="AA1" ng-model="intData[$index+1]['intLabel']">
							</div>
							<div class="col-sm-2" ng-if="intData[$index+1]['intType']=='physical:outlet'">
								<label for="connectorType">Connector:</label>
								<input id="connectorType" type="text" class="form-control" placeholder="C13" ng-model="intData[$index+1]['connectorType']">
							</div>



							<!-- General fields -->
							<div class="col-sm-3" ng-if="intData[$index+1]['intType']">
								<label for="intNote">Notes:</label>
								<input id="intNote" type="text" class="form-control" placeholder="Note.." ng-model="intData[$index+1]['intNote']">
							</div>

						</div>
					</div>
					<br>

					<!-- Buttons for -->
					<div class="row" ng-if='gen.expandCounter==0'>
						<div class="col-sm-2">
							<button type="button" class="btn btn-primary lightAccent" ng-click="expandCounterUpdate(true)">Add Interface...</button>
						</div>
					</div>
					<div class="row" ng-if='gen.expandCounter>0'>
						<div class="col-sm-1 col-sm-offset-5">
							<button type="button" class="btn btn-primary lightAccent" ng-click="expandCounterUpdate(false)">-</button>
						</div>
						<div class="col-sm-1">
							<button type="button" class="btn btn-primary lightAccent" ng-click="expandCounterUpdate(true)">+</button>
						</div>
					</div>

				</div>
			</div>
		</div>
		<!-- end interface form -->

		<!-- start end-of-form button -->
		<div class="row">
			<div class="col-sm-12">
				<button type="button" class="btn btn-primary pull-right lightAccent" data-toggle="modal" data-target="#submitModal">Submit</button>
			</div>
		</div>
		<!-- end buttons -->

	</div>
	<!--end ADD 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 %}