<section ng-controller="hostsCtrl">
	<tabset>
		<tab heading="Services">
			<br />
				<div style="padding: 10px 0px 25px 5px;" ng-show="(waitMessage && waitMessage.message !== '')">
					<alert type="{{waitMessage.type}}" close="waitMessage.close()">{{waitMessage.message}}</alert>
				</div>
				<br/>
				<div>
					<div ng-if="access.getEnvironmentProfile" class="f-right">
						&nbsp;
						<a href="" ng-click="downloadProfile(envCode)" class="btn btn-primary">
							<span class="icon icon-download3" tooltip="Download Profile"></span>{{translation.downloadProfile[LANG]}}
						</a>
					</div>
					<div ng-show="hosts.controller || nginxHosts.length > 0" class="f-right">
						<a href="" ng-click="listHosts(envCode)" class="btn btn-primary" tooltip="Refresh List">
							<span class="icon icon-undo"></span>{{translation.refresh[LANG]}}
						</a>
					</div>
					<br/><br/>
					<div ng-show="!hosts.controller">
						<!--<alert type="warning" ng-if="deployer.type ==='manual'">-->
						<!--{{translation.thisEnvironmentConfiguredDeployed[LANG]}} <b>{{translation.manually[LANG]}}</b>.-->
						<!--{{translation.allServicesRunningEnvironmentHaveStartedStoppedAdministrator[LANG]}}</br>-->
						<!--Please download the profile by clicking the button above and use it as the <strong>SOAJS_PROFILE</strong> environment variable prior to starting your controller(s).</br>-->
						<!--For more information <a href="https://soajsorg.atlassian.net/wiki/spaces/SOAJ/pages/61975478/Environment+Variables" target="_blank">click here</a>.-->
						<!--</alert>-->
						<alert type="info">
							<h4 class="left">Your Environment have been created.</h4>
						</alert>
						</br>
						<fieldset>
							<div class="row">
								<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
									<span class="installStepButton">1</span>
								</div>
								<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
									<h3>Start the Gateway:</h3>
								</div>
								<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
								<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
									<pre class="bash"><code><br> # Run this in your terminal to start the Gateway.<br/> > sudo miracle service start gateway --env={{envCode.toUpperCase()}} </br></br></code></pre>
									<p>
										<span class="glyphicon glyphicon-chevron-right"></span>&nbsp;For more
										information,
										<a href="https://soajsorg.atlassian.net/wiki/x/DQB8O" target="_blank">Click Here</a>
									</p>
								</div>
							</div>
						</fieldset>
							<fieldset>
							<div class="row">
								<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
									<span class="installStepButton">2</span>
								</div>
								<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
									<h3>Start your Services:</h3>
								</div>
								<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1"></div>
								<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11">
									<pre class="bash"><br> # Add these environment variables in your terminal before you start your service.<br> > export SOAJS_ENV={{envCode.toUpperCase()}} <br> > export SOAJS_REGISTRY_API={{SRVIP}}:{{SRVPORT}} <br> > export SOAJS_DEPLOY_MANUAL=1</br></br></code></pre>
									<p>
										<span class="glyphicon glyphicon-chevron-right"></span>&nbsp;For more
										information,
										<a href="https://soajsorg.atlassian.net/wiki/x/QQDaBQ" target="_blank">Click
											Here</a>
									</p>
								</div>
							</div>
						</fieldset>
					</div>
					<div class="entryBoxes entryBoxesGrid" ng-init="" style="padding-left: 5px;" ng-show="hosts.controller || nginxHosts.length > 0">
						<fieldset class="groupFieldset" ng-if="hosts.controller">
							<legend>
								<a href="" class="icon" ng-class="{'icon-minus': showCtrlHosts, 'icon-plus': !showCtrlHosts}" ng-click="showHideContent('controller')"></a>SOAJS
								GATEWAYS
							</legend>
							<alert type="info">
								Because this Environment is deployed manually, whenever a service or daemon starts or stops, make sure you run the <b>Awareness Operation</b> on all healthy <b>Gateways</b> in order to update the list and the display of this page.
							</alert><br />
							<div ng-repeat="(serviceName, serviceInfo) in hosts">
								<div ng-if="serviceName === 'controller'" class="serviceBox controllerEnvelop" ng-show="showCtrlHosts">
									<div style="width: 100%;" class="head {{serviceInfo.color}}" >
										<span class="icon" ng-class="serviceInfo.healthy===true? 'icon-smile2': 'icon-sad2'" ></span>&nbsp;gateway&nbsp;{{translation.port[LANG]}}:&nbsp;{{serviceInfo.port}}
										<span class="icon icon-{{iconContrl}} f-right iconPlus" ng-click="showHideContent('controllerInfo')"></span>
										<div ng-show = "showHideControllerInfo">
											<p><br> # Run this in your terminal to start the Gateway.
												<br/> > miracle service start gateway --env={{envCode.toUpperCase()}} </br></p>
											<p>
												<span class="glyphicon glyphicon-chevron-right"></span>&nbsp;For more
												information,
												<a href="https://soajsorg.atlassian.net/wiki/x/DQB8O" target="_blank">Click
													Here</a>
											</p>
											<br>
											<p># Add these environment variables in your terminal before you start your service.<br> > export SOAJS_ENV={{envCode.toUpperCase()}}<br> > export SOAJS_REGISTRY_API={{SRVIP}}:{{SRVPORT}}<br> > export SOAJS_DEPLOY_MANUAL=1</br></code></p>
											<p>
												<span class="glyphicon glyphicon-chevron-right"></span>&nbsp;For more
												information,
												<a href="https://soajsorg.atlassian.net/wiki/x/QQDaBQ" target="_blank">Click
													Here</a>
											</p>
										</div>
									</div>
									<div class="service-ips clearfix">
										<div ng-repeat="oneIp in serviceInfo.ips" style="float:left; margin:0 1px; width: 49.5%;">
											<table width="100%" border="1" cellpadding="2" cellspacing="1" class="hostsGrid" valign="middle">
												<tbody>
													<tr>
														<th class="actions">
															{{translation.actions[LANG]}}
														</th>
														<td width="60%" valign="top" rowspan="2" class="{{oneIp.color}}">
															<span><b>{{translation.hostname[LANG]}}:</b>&nbsp;{{oneIp.hostname}}<br/></span>
															<span><b>{{translation.version[LANG]}}:</b>&nbsp;{{oneIp.version}} <br/></span>
															<span><b>IP:</b>&nbsp;{{oneIp.ip}}</span>
														</td>
													</tr>
													<tr>
														<td valign="top" width="15%" >
															<div ng-repeat="operation in  oneIp.maintenance">
																<div class="f-left">
																	<a href="" ng-click="operation.action(envCode, oneIp)" title="{{operation.title}}">
																		<span class="{{operation.icon}}"></span>&nbsp;
																	</a>
																</div>
															
															</div>
														</td>
													</tr>
												</tbody>
											</table>
											<br/>
										</div>
									</div>
								</div>
							</div>
							<div class="entryBoxes entryBoxesGrid" ng-show="!showCtrlHosts">
								<div ng-repeat="(serviceName, serviceInfo) in hosts">
									<div ng-if="serviceName === 'controller'" class="entryBox blueBox" ng-repeat="oneIp in serviceInfo.ips" ng-style="{'width': '20%', 'text-align': 'center'}">
										<div style="width: 100%;" class="head {{oneIp.color}}">
											<span class="icon" ng-class="serviceInfo.healthy===true? 'icon-smile2': 'icon-sad2'"></span>
											&nbsp;{{oneIp.name}}&nbsp;{{translation.port[LANG]}}:&nbsp;{{oneIp.port}}
										</div>
									</div>
								</div>
							</div>
						</fieldset>
						<div ng-repeat="(groupName, groupContent) in groups">
							<fieldset class="groupFieldset">
								<legend>
									<a href="" class="icon" ng-class="{'icon-minus': groupContent.showContent, 'icon-plus': !groupContent.showContent}" ng-click="showHideGroupContent(groupName)"></a>{{groupName}}
								</legend>
								<div ng-repeat="service in groupContent.services" ng-if="groupContent.showContent">
									<div ng-if="hosts[service].ips" class="serviceBox">
										<div style="padding: 10px 0px 25px 5px;" ng-show="(hosts[service].waitMessage && hosts[service].waitMessage.message!=='')">
											<alert type="{{hosts[service].waitMessage.type}}" close="hosts[service].waitMessage.close(hosts[service])">
												{{hosts[service].waitMessage.message}}
											</alert>
										</div>
										<div style="width: 100%;" class="head {{hosts[service].color}}">
											<span class="icon" ng-if="hosts[service].type === 'service'" ng-class="hosts[service].healthy===true? 'icon-smile2': 'icon-sad2'"></span>
											<span class="icon icon-evil2" ng-if="hosts[service].type === 'daemon'"></span>
											&nbsp;{{hosts[service].name}}&nbsp;{{translation.port[LANG]}}:&nbsp;{{hosts[service].port}}
										</div>
										<div class="service-ips">
											<div ng-repeat="(version, ips) in hosts[service].ips">
												<div ng-repeat="oneIp in ips" class="" style="padding:3px 0 0 0;">
													<table border="0" width="100%" cellpadding="2" cellspacing="1" valign="middle">
														<tr>
															<td width="30%" valign="middle">
																<table width="100%" border="1" cellpadding="2" cellspacing="1" class="hostsGrid">
																	<tbody>
																		<tr>
																			<th class="actions">
																				{{translation.actions[LANG]}}
																			</th>
																			<td valign="top" rowspan="2" class="{{oneIp.color}}">
																				<span><b>{{translation.hostname[LANG]}}:</b>&nbsp;{{oneIp.hostname}}<br/></span>
																				<span><b>{{translation.version[LANG]}}:</b>&nbsp;{{version}} <br/></span>
																				<span ng-if="oneIp.grpConfName"><b>{{translation.group[LANG]}}:</b>&nbsp;{{oneIp.grpConfName}} <br/></span>
																				<span><b>IP:</b>&nbsp;{{oneIp.ip}}</span>
																			</td>
																		</tr>
																		<tr>
																			<td valign="top" width="26%">
																				<div ng-repeat="operation in  oneIp.maintenance">
																					<div class="f-left">
																						<a href="" ng-click="operation.action(envCode, oneIp)" title="{{operation.title}}">
																							<span class="{{operation.icon}}"></span>&nbsp;
																						</a>
																					</div>
																				</div>
																			</td>
																		</tr>
																	</tbody>
																</table>
															</td>
															<td width="70%">
																<table width="99%" border="1" cellpadding="2" cellspacing="1" class="hostsGrid" style="margin:0 auto;">
																	<thead>
																		<tr>
																			<th width="15%" colspan="2">
																				{{translation.gatwayUpperCase[LANG]}}
																			</th>
																			<th width="15%">{{translation.status[LANG]}}
																			</th>
																			<th class="lastCheck">
																				{{translation.lastCheck[LANG]}}
																			</th>
																			<th class="downSince">
																				{{translation.downSince[LANG]}}
																			</th>
																			<th class="downCount">
																				{{translation.downCount[LANG]}}
																			</th>
																		</tr>
																	</thead>
																	<tr ng-repeat="oneController in oneIp.controllers" ng-class="{'first': $first, 'last': $last}" ng-class-odd="'odd'" ng-class-even="'even'">
																		<td><span class="{{oneController.color}}">v.{{oneController.version}}</span>
																		</td>
																		<td><span class="{{oneController.color}}">{{oneController.ip}}</span>
																		</td>
																		<td><span class="{{oneController.color}}" id="1">
																	{{oneController.color === 'green' ? translation.healthy[LANG] : translation.notHealthy[LANG]}}</span>
																		</td>
																		<td><span>{{oneIp.lastCheck}}</span></td>
																		<td><span>{{oneIp.downSince}}</span></td>
																		<td><span>{{oneIp.downCount}}</span></td>
																	</tr>
																</table>
															</td>
														</tr>
													</table>
												</div>
											</div>
										</div>
									</div>
									<br>
								</div>
								<div class="entryBoxes entryBoxesGrid" ng-if="!groupContent.showContent">
									<div class="entryBox blueBox" ng-repeat="service in groupContent.services" ng-style="{'width': '20%', 'text-align': 'center'}">
										<div style="width: 100%;" class="head {{hosts[service].color}}">
											<span class="icon" ng-if="hosts[service].type === 'service'" ng-class="hosts[service].healthy===true? 'icon-smile2': 'icon-sad2'"></span>
											<span class="icon icon-evil2" ng-if="hosts[service].type === 'daemon'"></span>
											&nbsp;{{hosts[service].name}}&nbsp;{{translation.port[LANG]}}:&nbsp;{{hosts[service].port}}
										</div>
									</div>
								</div>
							</fieldset>
						</div>
					</div>
				</div>
		</tab>
		<tab heading="Virtual Machines" ng-if="showVMs" ng-click="vms.listVMLayers()">
			<br />
			<div ng-include="'modules/dashboard/environments/infra/directives/vms.tmpl'"></div>
		</tab>
	</tabset>
</section>