<div class="w-100 c-both">
	<div class="f-left w20">
		<a class="btn btn-sm btn-primary" ng-if="access.addNetwork" ng-click="addNetwork()">
			<span class="icon icon-plus"></span> Add New Network
		</a>
	</div>
	
	<div class="f-right w30">
		<div class="searchBoxContainer">
			<button class="btn btn-success f-right" ng-click="listNetworks(selectedGroup)">
				Refresh&nbsp;&nbsp;<span class="icon icon-loop2"></span>
			</button>
		</div>
		
		<div ng-if="infraGroups.length > 0">
			Group:
			<select style="display:inline" class="form-control w50" ng-model="selectedGroup" ng-change="listNetworks(selectedGroup)" ng-options="group as group.name group by group.region for group in infraGroups">
			</select>
		</div>
	</div>
	<br/><br/>
</div>

<div ng-if="access.list">
	<alert type="warning" ng-if="!infraNetworks || infraNetworks.length === 0">
		No Networks found in this Group.
	</alert>
	<div ng-if="infraNetworks && infraNetworks.length > 0" class="entryBoxes">
		<br/>
		
		<accordion close-others="false">
			<accordion-group is-open="oneNetwork.open" ng-repeat="oneNetwork in infraNetworks">
				<accordion-heading>
					{{oneNetwork.name}}
					<span class="f-right">
							Address: {{oneNetwork.address[0]}}
						</span>
				</accordion-heading>
				<div class="w-100 c-both t-right">
					<a href="" ng-click="editNetwork(oneNetwork)" class="btn btn-sm btn-primary">
						<span class="icon icon-pencil2"></span>&nbsp;Modify
					</a>&nbsp;&nbsp;
					<a class="btn btn-sm btn-danger" href="" ng-click="deleteNetwork(oneNetwork)" ng-confirm-click="Are you sure you want to delete this network ?">
						<span class="icon icon-cross"></span>&nbsp;Delete
					</a>
				</div>
				
				<fieldset ng-if="oneNetwork.dnsServers && oneNetwork.dnsServers.length > 0">
					<legend>DNS Servers</legend>
					<div class="entryBoxes entryBoxesGrid">
						<div ng-repeat="oneServer in oneNetwork.dnsServers">
							<div class="entryBox blueBox" style="padding: 3px 5px;">
								<b>IP Address</b>&nbsp;{{oneServer}}
							</div>
						</div>
					</div>
				</fieldset>
				
				<fieldset ng-if="oneNetwork.subnets && oneNetwork.subnets.length > 0">
					<legend>Subnets</legend>
					<div class="grid">
						<table width="100%">
							<thead>
								<tr>
									<th>Name</th>
									<th>Address</th>
									<th>Virtual Machines</th>
								</tr>
							</thead>
							<tbody>
								<tr ng-repeat="oneSubnet in oneNetwork.subnets" ng-class-even="'even'" ng-class-odd="'odd'">
									<td>{{oneSubnet.name}}</td>
									<td>{{oneSubnet.address}}</td>
									<td>
										<div ng-if="!oneSubnet.vm">N/A</div>
										<div ng-if="oneSubnet.vm.link">
											<a href="#/environments-platforms?envCode={{oneSubnet.vm.envCode}}&tab=vm&layer={{oneSubnet.vm.vmLayer}}">
												<span class="icon icon-stack"></span>&nbsp;<b>{{oneSubnet.vm.vmLayer}}</b>&nbsp;
											</a>
										</div>
										<div ng-if="oneSubnet.vm && !oneSubnet.vm.link">
											<b>
												<span class="icon icon-stack"></span>&nbsp;<b>{{oneSubnet.vm.vmLayer}}</b>&nbsp;
											</b>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</fieldset>
				
				<div ng-if="oneNetwork.firewall && oneNetwork.firewall.length > 0">
					<fieldset>
						<legend>Firewall</legend>
						<div class="entryBoxes entryBoxesGrid">
							<div ng-repeat="oneFirewall in oneNetwork.firewall">
								<div class="entryBox blueBox" style="padding: 3px 5px;">
									<a href="#/infra-firewall/?group={{oneFirewall.group}}">
										<span class="icon icon-shield"></span>&nbsp;<b>{{oneFirewall.name}}</b>
									</a>
								</div>
							</div>
						</div>
					</fieldset>
				</div>
			
			</accordion-group>
		</accordion>
	</div>
</div>