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

	<!--start outer div-->
	<div ng-init="dnsDeviceList()">
		<!-- currently selected panel -->
		<div  ng-show="dnsSelectList.length > 0">
			<div class="panel panel-default">
				<div class="panel-heading">Selected</div>
				<div class="panel-body">
					<span ng-repeat="(entryID,entryName) in dnsSelectInfo">
						{{entryName|angular}} (with ID {{entryID|angular}})<br>
					</span>

					<br>ID List: {{dnsSelectList|angular}}

					<a href="{{url_for('tools.generateDNScsv')}}?devices={{dnsSelectList|angular}}" download id="download">


						<button type="button" class="btn btn-primary pull-right" >Download CSV</button>
					</a>
				</div> <!-- end panel body-->
			</div> <!-- end currently selected panel -->
			<hr>
		</div>


		<div class="form-group"> <!--start search bar-->
			<div class="input-group">
			<div class="input-group-addon"><i class="fa fa-search"></i></div>
				<input type="text" class="form-control" placeholder="Search within results..." ng-model="gen.searchValue">
			</div>
		</div> <!--end search bar-->

		<hr>

		<!-- Check for no data collected returned for API  -->
		<p ng-show="gen.errorEvent == 'noData'">Error: No Data Found</p>

		<!-- Start device selection table -->
		<div class="panel panel-default" style="overflow:auto" ng-if="gen.errorEvent != 'noData' && gen.tableLoading == false">
			<table class="table table-bordered table-striped table-hover" ng-init="openCount=0">
				<thead>
					<tr>
						<th><a href="#">SELECT</a></th>
						<th>
							<a href="#" ng-click="setSort('deviceName'); reverseSort()">DEVICE NAME
								<span ng-show="gen.sortValue == 'deviceName' && !gen.sortReverse" class="fa fa-caret-down"></span>
								<span ng-show="gen.sortValue == 'deviceName' && gen.sortReverse" class="fa fa-caret-up"></span>
							</a>
						</th>
						<th>
							<a href="#" ng-click="setSort('rackName'); reverseSort()">RACK
								<span ng-show="gen.sortValue == 'rackName' && !gen.sortReverse" class="fa fa-caret-down"></span>
								<span ng-show="gen.sortValue == 'rackName' && gen.sortReverse" class="fa fa-caret-up"></span>
							</a>
						</th>
						<th>
							<a href="#" ng-click="setSort('locationCode'); reverseSort()">SITE
								<span ng-show="gen.sortValue == 'locationCode' && !gen.sortReverse" class="fa fa-caret-down"></span>
								<span ng-show="gen.sortValue == 'locationCode' && gen.sortReverse" class="fa fa-caret-up"></span>
							</a>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr ng-repeat="row in dnsDeviceInfoDictList | orderBy:gen.sortValue:sortReverse | filter:gen.searchValue" ng-init="row.expanded=false">
						<td ng-click="row.expanded=!row.expanded;expandCounterUpdate(row.expanded)" ng-class="{ 'backgroundDarkPurple whiteText': row.expanded == true }" ng-checked>
							<label><input type="checkbox" value="{{row.deviceID|angular}}" ng-checked="dnsSelectList.indexOf(row.deviceID) > -1" ng-click="toggleDNSSelection(row.deviceID,row.deviceName)"></label>
						</td>
						<td ng-click="row.expanded=!row.expanded;expandCounterUpdate(row.expanded)" ng-class="{ 'backgroundDarkPurple whiteText': row.expanded == true }">{{row.deviceName|angular}}</td>
						<td ng-click="row.expanded=!row.expanded;expandCounterUpdate(row.expanded)" ng-class="{ 'backgroundDarkPurple whiteText': row.expanded == true }">{{row.rackName|angular}}</td>
						<td ng-click="row.expanded=!row.expanded;expandCounterUpdate(row.expanded)" ng-class="{ 'backgroundDarkPurple whiteText': row.expanded == true }">{{row.locationCode|angular}}</td>
					</tr>
				</tbody>
			</table>
			<div class="row" ng-show="gen.tableLoading==true">
				<div class="col-md-2 col-md-offset-5" style="text-align:center">
					<i class="fa fa-refresh fa-spin"></i>
				</div>
			</div>
		</div><!-- end device selection table -->

		
	</div>
	<!-- end outer div -->
	{% endif %}
{% endblock %}
{% block scripts %}
{% endblock %}