{% extends 'base.html' %}
{% set active_page = "device" %}
{% set version2 = False %}
 
{% block container %}
	{% if current_user.is_authenticated %}

	{% if current_user.is_admin(current_user) %}
	<!-- modal for change submit -->
    <div id="editModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
        	<form method="POST" action="{{ url_for('data.interface_details') }}?intID={{intInfoDict['intID']}}" role="form">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="modal-title">edit interface <strong>{{intInfoDict['intName']}} ({{intInfoDict['intID']}})</strong></h4>
				</div> <!-- end model header -->

				<div class="modal-body">
	       			{{ form.csrf_token }}
	       			<input name="intID" type="hidden" value="{{intInfoDict['intID']}}"/ >
					{% macro render_field(field,span,preFill) %}
					<div class="col-sm-{{span}}">
						{{field.label}} <span style="padding-left:5px;color:green;">{{ preFill }}</span>
						{{field(value=preFill,class="form-control")|safe}}
						{% if field.errors %}
							<ul class=errors>
							{% for error in field.errors %}
							<li>{{ error }}</li>
							{% endfor %}
							</ul>
						{% endif %}
					</div>
					{% endmacro %}
					{% macro render_select_field(field,span,preFill,options,fieldName) %}
					<div class="col-sm-{{span}}">
						{{field.label}} <span style="padding-left:5px;color:green;">{{ preFill }}</span>
						<select class="form-control" id="{{fieldName}}" name="{{fieldName}}">
							{% for key,value in options.iteritems() %}
							{%- if value == preFill %}
	                			<option value="{{key}}" selected>{{value}}</option>
	                		{% else %}
	                			<option value="{{key}}">{{value}}</option>
	                		{% endif %}
	                		{% endfor %}
	                	</select>
						{% if field.errors %}
							<ul class=errors>
							{% for error in field.errors %}
							<li>{{ error }}</li>
							{% endfor %}
							</ul>
						{% endif %}
					</div>
					{% endmacro %}
					<div class="row">
						{{render_field(form.intName,'12',intInfoDict['intName'])}}
					</div>
					<div class="row topSpacer">
	                    {{render_field(form.intLabel,'6',intInfoDict['intLabel'])}}
	                    {{render_select_field(form.intType,'6',intInfoDict['intType'],typeOptDict,'intType')}}
					</div>
					<div class="row topSpacer">
                    	{{render_field(form.intNote,'12',intInfoDict['intNote'])}}
					</div>
					<div class="row topSpacer">
						{{render_select_field(form.deviceID,'6',intInfoDict['deviceName'],deviceOptDict,'deviceID')}}
	                    {{render_select_field(form.intPosition,'6',intInfoDict['intPosition'],positionOptDict,'intPosition')}}
					</div>
					<div class="row topSpacer">
	                    {{render_select_field(form.connectorType,'6',intInfoDict['connectorType'],connectorOptDict,'connectorType')}}
	                    {{render_field(form.lastCleaned,'6',intInfoDict['lastCleaned'])}}
					</div>
					<div class="row topSpacer">
                    	{{render_field(form.ipv4address,'4',intInfoDict['ipv4address'])}}
	                    {{render_field(form.ipv4Subnet,'4',intInfoDict['ipv4Subnet'])}}
	                    {{render_field(form.ipv4Gateway,'4',intInfoDict['ipv4Gateway'])}}
					</div>
				</div> <!-- end modal body -->

				<div class="modal-footer">
					<button type="submit" class="btn btn-primary darkAccent" style="background-color:green;">
						Confirm
					</button>
					<button class="btn btn-primary darkAccent" style="background-color:red;" data-dismiss="modal">
						Cancel
					</button>
				</div> <!-- end modal footer -->>
		    </form>
        </div> <!-- end modal content -->
      </div>
    </div> <!-- end modal -->
    {% endif %}

	<!--start details div-->
	<div>
		<div class="row">
	        <div class="col-sm-4">
	        {% if current_user.is_admin(current_user) %}
	        <button type="button" class="btn btn-primary darkAccent" data-toggle="modal" data-target="#editModal" style="background-color:orange;color:#6441A5">edit int</button>
	        {% endif %}
	        </div>
	        <div class="col-sm-8">
	            <a ng-href="{{url_for('data.device_details')}}?name={{intInfoDict['deviceName']}}"><button  type="button" class="btn btn-primary pull-right lightAccent">back</button></a>
	        </div>
	    </div>
	    <br>
	    <div class="panel panel-default">
	        <div class="panel-heading">
	            Interface Details
	        </div>
	        <div class="panel-body">
	            <div class="row">
	                <div class="col-sm-4">
	                	<div class="infobubble">
	                		<div class="value">
		                		{%- if intInfoDict['intName'] == false or intInfoDict['intName'] == 'None' %}
		                		<span class="fa fa-question"></span>
		                		{% else %}
		                			{{intInfoDict['intName']}}
		                		{% endif %}
	                		</div>
	                		<hr>
	                		<div class="label">
	                			INTERFACE NAME
	                		</div>
	                	</div>
	                </div>
	                <div class="col-sm-4">
	                	<div class="infobubble">
	                		<div class="value">
		                		{%- if (intInfoDict['intLabel'] == false) or (intInfoDict['intLabel'] == 'None') %}
		                		<span class="fa fa-question"></span>
		                		{% else %}
		                			{{intInfoDict['intLabel']}}
		                		{% endif %}
	                		</div>
	                		<hr>
	                		<div class="label">
	                			INTERFACE LABEL
	                		</div>
	                	</div>
	                </div>
	                <div class="col-sm-4">
	                	<div class="infobubble">
	                		<div class="value">
		                		{%- if intInfoDict['intType'] == false or intInfoDict['intType'] == 'None' %}
		                		<span class="fa fa-question"></span>
		                		{% else %}
		                			{{intInfoDict['intType']}}
		                		{% endif %}
	                		</div>
	                		<hr>
	                		<div class="label">
	                			INTERFACE TYPE
	                		</div>
	                	</div>
	                </div>
	            </div>
	            <div class="row">
	                <div class="col-sm-12">
	                	<div class="infobubble">
	                		<div class="value">
		                		{%- if intInfoDict['intNote'] == false or intInfoDict['intNote'] == 'None' %}
		                		<span class="fa fa-question"></span>
		                		{% else %}
		                			{{intInfoDict['intNote']}}
		                		{% endif %}
	                		</div>
	                		<hr>
	                		<div class="label">
	                			INTERFACE NOTES
	                		</div>
	                	</div>
	                </div>
	            </div>
	        </div>
	    </div>

	    <div class="panel panel-default">
	        <div class="panel-heading">
	            Interface Physical Attributes
	        </div>
	        <div class="panel-body">
	            <div class="row">
	            	<div class="col-sm-4">
	                    <div class="infobubble">
	                    	<div class="value">
		                   		{% if intInfoDict['deviceName'] == false or intInfoDict['deviceName'] == 'None' %}
		                   		<span class="fa fa-question"></span>
		                		{% else %}
									<a href="{{ url_for('data.device_details') }}?name={{intInfoDict['deviceName']}}">
									{{intInfoDict['deviceName']}}
									</a>
		                   		{% endif %}
							</div>
							<hr>
							<div class="label">
								DEVICE NAME
							</div>
						</div>
	                </div>
	                <div class="col-sm-2">
	                	<div class="infobubble">
	                		<div class="value">
		                		{%- if intInfoDict['intPosition'] == false or intInfoDict['intPosition'] == 'None' %}
		                		<span class="fa fa-question"></span>
		                		{% else %}
		                			{{intInfoDict['intPosition']}}
		                		{% endif %}
	                		</div>
	                		<hr>
	                		<div class="label">
	                			INTERFACE POSITION
	                		</div>
	                	</div>
	                </div>
	                <div class="col-sm-3">
	                	<div class="infobubble">
	                		<div class="value">
		                		{%- if intInfoDict['connectorType'] == false or intInfoDict['connectorType'] == 'None' %}
		                		<span class="fa fa-question"></span>
		                		{% else %}
		                			{{intInfoDict['connectorType']}}
		                		{% endif %}
	                		</div>
	                		<hr>
	                		<div class="label">
	                			CONNECTOR TYPE
	                		</div>
	                	</div>
	                </div>
	                <div class="col-sm-3">
	                	<div class="infobubble">
	                		<div class="value">
		                		{%- if intInfoDict['lastCleaned'] == false or intInfoDict['lastCleaned'] == 'None' %}
		                		<span class="fa fa-question"></span>
		                		{% else %}
		                			{{intInfoDict['lastCleaned']}}
		                		{% endif %}
	                		</div>
	                		<hr>
	                		<div class="label">
	                			LAST CLEANED
	                		</div>
	                	</div>
	                </div>
	            </div>
	        </div>
	    </div>

	    <div class="panel panel-default">
	        <div class="panel-heading">
	            Interface Logical Attributes
	        </div>
	        <div class="panel-body">
	            <div class="row">
	                <div class="col-sm-3">
	                	<div class="infobubble">
	                		<div class="value">
		                		{%- if intInfoDict['ipv4address'] == false or intInfoDict['ipv4address'] == 'None' %}
		                		<span class="fa fa-question"></span>
		                		{% else %}
		                			{{intInfoDict['ipv4address']}}
		                		{% endif %}
	                		</div>
	                		<hr>
	                		<div class="label">
	                			IPv4 ADDRESS
	                		</div>
	                	</div>
	                </div>
	                <div class="col-sm-3">
	                	<div class="infobubble">
	                		<div class="value">
		                		{%- if intInfoDict['ipv4Subnet'] == false or intInfoDict['ipv4Subnet'] == 'None' %}
		                		<span class="fa fa-question"></span>
		                		{% else %}
		                			{{intInfoDict['ipv4Subnet']}}
		                		{% endif %}
	                		</div>
	                		<hr>
	                		<div class="label">
	                			IPv4 SUBNET
	                		</div>
	                	</div>
	                </div>
	                <div class="col-sm-3">
	                	<div class="infobubble">
	                		<div class="value">
		                		{%- if intInfoDict['ipv4Gateway'] == false or intInfoDict['ipv4Gateway'] == 'None' %}
		                		<span class="fa fa-question"></span>
		                		{% else %}
		                			{{intInfoDict['ipv4Gateway']}}
		                		{% endif %}
	                		</div>
	                		<hr>
	                		<div class="label">
	                			IPv4 GATEWAY
	                		</div>
	                	</div>
	                </div>
	            </div>
	        </div>
	    </div>




	</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 %}