{% extends 'base.html' %}
{% set active_page = "pop" %}
{% 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}}','racks','rackID')"></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">
					POP Details
					</div>
					<div class="panel-body">
						<div class="col-sm-7">

							<div class="row">
								<div class="col-sm-12">
									<div class="infobubble">
										<div class="value">
											<span ng-if="showEmpty(getData.locationCode)" class="fa fa-question"></span>
											<span editable-text="getData.locationCode" e-form="tableform" e-required>
												{{getData.locationCode|angular}}
											</span>
										</div>
										<hr>
										<div class="label">Site Name</div>
									</div> <!--end infobubble-->
								</div> <!-- end column -->
							</div> <!--end row-->

							<div class="row">
								<div class="col-sm-7">
									<div class="infobubble">
										<div class="value">
											<span ng-if="showEmpty(getData.hostingProvider)" class="fa fa-question"></span>
											<span editable-text="getData.hostingProvider" e-form="tableform">
												{{getData.hostingProvider|angular}}
											</span>
										</div>
										<hr>
										<div class="label">Hosting Provider</div>
									</div> <!-- end infobubble -->
								</div> <!-- end column -->
								<div class="col-sm-5">
									<div class="infobubble">
										<div class="value">
											<span ng-if="showEmpty(getData.amazonEntity)" class="fa fa-question"></span>
											<span editable-text="getData.amazonEntity" e-form="tableform">
												{{getData.amazonEntity|angular}}
											</span>
										</div>
										<hr>
										<div class="label">Amazon Entity</div>
									</div> <!-- end infobubble -->
								</div> <!-- end column -->
							</div>

							<div class="row">
								<div class="col-sm-7">
									<div class="infobubble">
										<div class="value">
											<span ng-if="showEmpty(getData.contactEmail)" class="fa fa-question"></span>
											<span editable-text="getData.contactEmail" e-form="tableform">
												{{getData.contactEmail|angular}}
											</span>
										</div>
										<hr>
										<div class="label">Contact Email Address</div>
									</div> <!-- end infobubble -->
								</div> <!-- end column -->
								<div class="col-sm-5">
									<div class="infobubble">
										<div class="value">
											<span ng-if="showEmpty(getData.contactPhone)" class="fa fa-question"></span>
											<span editable-text="getData.contactPhone" e-form="tableform">
												{{getData.contactPhone|angular}}
											</span>
										</div>
										<hr>
										<div class="label">Contact Phone Number</div>
									</div> <!-- end infobubble -->
								</div> <!-- end column -->
							</div>

						</div><!--end column-->
						<div class="col-sm-5">
							<span ng-if="!showEmpty(getData.gMapAddress)">No Google Map Data Found</span>
							<div id="map" style='width: 100%;'></div>
							<script>
								function initMap() {
									var mapDiv = document.getElementById('map');
									var map = new google.maps.Map(mapDiv, {
										center: {{getData.gMapAddress|angular}},
										zoom: 10
									});
									var marker = new google.maps.Marker({
										position: {{getData.gMapAddress|angular}},
										map: map,
										title: '{{getData.locationCode|angular}}'
									});
								}
							</script>
							<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
							async defer></script>
						</div>

						<div class="row">
							<div class="col-sm-12">
								<div class="infobubble">
									<div class="value">
										<span ng-if="showEmpty(getData.locationNotes)" class="fa fa-question"></span>
										<span editable-text="getData.locationNotes" e-form="tableform">
											{{getData.locationNotes|angular}}
										</span>
									</div>
									<hr>
									<div class="label">Notes</div>
								</div> <!--end infobubble-->
							</div> <!-- end column -->
						</div> <!--end row-->
					</div><!--end information panel body-->
				</div> <!--end information panel-->
			</div> <!--end outter row-->
			<div class="row" ng-if="showEmpty(getData.gFolderID)">
				<div class="col-sm-9">
					<div class="panel panel-default">
						<div class="panel-heading">Google Drive Folder</div>
						<div class="panel-body" ng-if="!showEmpty(getData.gFolderID)">
							<iframe src="https://drive.google.com/embeddedfolderview?id=getData.gFolderID#list" style='height: 300px; width: 100%;' frameborder="0"></iframe>
						</div>
					</div>
				</div>
				<div class="col-sm-3">
					<div class="panel panel-default">
						<div class="panel-heading">Temp Field</div>
						<div class="penel-body">
							<span>stuff....</span>
						</div>
					</div>
				</div> <!-- end column -->
			</div> <!-- end row -->
			<hr>



			<div class="panel panel-default">
				<div class="panel-heading">Racks</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;">Rack Name</th>
								<th style="text-decoration: underline;">U Count</th>
								<th style="text-decoration: underline;">Rack Subnet</th>
								<th style="text-decoration: underline;">Rack Notes</th>
								<th style="text-decoration: underline;">Rack Status</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.racks | filter:filterElement">
									<td>
										<span editable-text="element.rackName" e-form="tableform" e-required>
										{{element.rackName|angular}}
										</span>
									</td>
									<td>
										<span ng-if="!element.uCount" ng-show="!tableform.$visible" class="fa fa-question"></span>
										<span editable-text="element.uCount" e-form="tableform" e-required>
										{{element.uCount|angular}}
										</span>
									</td>
									<td>
										<span ng-if="!element.rackSubnet" ng-show="!tableform.$visible" class="fa fa-question"></span>
										<span editable-text="element.rackSubnet" e-form="tableform">
										{{element.rackSubnet|angular}}
										</span>
									</td>
									<td>
										<span ng-if="!element.rackNotes" ng-show="!tableform.$visible" class="fa fa-question"></span>
										<span editable-text="element.rackNotes" e-form="tableform">
										{{element.rackNotes|angular}}
										</span>
									</td>
									<td>
										<span ng-if="!element.rackStatus" ng-show="!tableform.$visible" class="fa fa-question"></span>
										<span editable-text="element.rackStatus" e-form="tableform">
										{{element.rackStatus|angular}}
										</span>
									</td>
									<td align="center" ng-show="!tableform.$visible" >
										<button type="button" ng-click="goToRack('{{ url_for('data.rack_details') }}?site=',getData.locationCode,'&rack=',element.rackName);" class="btn btn-primary lightAccent"">
											More
										</button>
									</td>
									<td align="center" ng-show="tableform.$visible" >
										<button type="button" ng-click="deleteElement('locationID',element.locationID)" 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 rack will only work if there are no devices tied to that rack</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 %}