<script type="text/ng-template" id="custom_registry.html">
	<fieldset>
		<legend>{{obj.name}}</legend>
		<div class="addEnvTable">
			<table>
				<tbody>
					<tr>
						<td><label>Locked</label></td>
						<td><span>{{obj.locked?true:false}}</span></td>
					</tr>
					<tr>
						<td><label>Shared</label></td>
						<td><span>{{obj.shared?true:false}}</span></td>
					</tr>
					<tr ng-if="!isObjEmpty(obj.value)">
						<td valign="top"><label>Value</label></td>
						<td style="padding: 10px"><span><pre><code class="javascript">{{obj.value | json}}</code></pre></span>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
	</fieldset>
	<br>
</script>

<script type="text/ng-template" id="secrets.html">
	<br>
	<div class="addEnvTable">
		<table>
			<tbody>
				<tr>
					<td><label>Name</label></td>
					<td><span>{{obj.name}}</span></td>
				</tr>
				<tr ng-if="obj.namespace">
					<td><label>Namespace</label></td>
					<td><span>{{obj.namespace}}</span></td>
				</tr>
				<tr>
					<td><label>Type</label></td>
					<td><span>{{obj.type}}</span></td>
				</tr>
				<tr>
					<td><label>Data</label></td>
					<td>
						<span ng-if="obj.datatype !=='file'">****************</span>
						<span ng-if="obj.datatype ==='file'"><span class="icon icon-file-text"></span> Uploaded File</span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<br>
</script>

<script type="text/ng-template" id="resources.html">
	<br>
	<div class="addEnvTable">
		<table>
			<tbody>
				<tr>
					<td><label>Type</label></td>
					<td><span>{{resource.type}}</span></td>
				</tr>
				<tr>
					<td><label>Category</label></td>
					<td><span>{{resource.category}}</span></td>
				</tr>
				<tr>
					<td><label>Locked</label></td>
					<td><span>{{resource.locked?true:false}}</span></td>
				</tr>
				<tr>
					<td><label>Shared</label></td>
					<td><span>{{resource.shared?true:false}}</span></td>
				</tr>
				<tr>
					<td><label>Plugged</label></td>
					<td><span>{{resource.plugged?true:false}}</span></td>
				</tr>
				<tr ng-if="!isObjEmpty(resource.config)">
					<td valign="top"><label>Config</label></td>
					<td style="padding: 10px"><span><pre><code class="javascript">{{resource.config | json}}</code></pre></span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<br>
</script>

<script type="text/ng-template" id="productization.html">
	<table width="100%">
		<thead>
			<tr>
				<th width="50%">Name</th>
				<th width="50%">Description</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-class-odd="'odd'" ng-class-even="'even'" class="rows">
				<td colspan="2">
					<table width="100%">
						<tr>
							<td width="50%">{{product.name}} [ {{product.code}} ]</td>
							<td width="50%">{{product.description}}</td>
						</tr>
						<tr ng-if="product.packages.length > 0">
							<td colspan="2">
								<table width="100%">
									<caption>Packages:</caption>
									<tbody>
										<tr ng-repeat="pack in product.packages">
											<td width="50%">{{pack.name}} [ {{pack.code}} ]</td>
											<td width="50%">{{pack.description}}</td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</tbody>
	</table>
</script>

<script type="text/ng-template" id="tenant.html">
	<table width="100%">
		<thead>
			<tr>
				<th width="50%">Name</th>
				<th width="50%">Description</th>
			</tr>
		</thead>
		<tbody>
			<tr ng-class-odd="'odd'" ng-class-even="'even'" class="rows">
				<td colspan="2">
					<table width="100%">
						<tr>
							<td width="50%">{{tenant.name}} [ {{tenant.code}} ]</td>
							<td width="50%">{{tenant.description}}</td>
						</tr>
						<tr ng-if="tenant.applications.length > 0">
							<td colspan="2">
								<table width="100%">
									<caption>Applications:</caption>
									<tbody>
										<tr ng-repeat="app in tenant.applications">
											<td width="50%">{{app.package}}</td>
											<td width="50%">{{app.description}}</td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</tbody>
	</table>
</script>

<script type="text/ng-template" id="repo.html">
	<br>
	<div class="addEnvTable">
		<table>
			<tbody>
				<tr>
					<td><label>Type</label></td>
					<td><span>{{repo.type}}</span></td>
				</tr>
				<tr>
					<td><label>Recipe</label></td>
					<td><span>{{repo.options.recipeName}}</span></td>
				</tr>
				<tr>
					<td><label>Replication Mode</label></td>
					<td><span>{{repo.options.deployConfig.replication.mode}}</span></td>
				</tr>
				<tr ng-if="repo.options.deployConfig.replication.replicas">
					<td><label>Replicas</label></td>
					<td><span>{{repo.options.deployConfig.replication.replicas}}</span></td>
				</tr>
				<tr>
					<td><label>Memory Limit</label></td>
					<td><span>{{repo.options.deployConfig.memoryLimit/1048576}} MB</span></td>
				</tr>
				<tr>
					<td><label>Owner</label></td>
					<td><span>{{repo.options.gitSource.owner}}</span></td>
				</tr>
				<tr>
					<td><label>Repo</label></td>
					<td><span>{{repo.options.gitSource.repo}}</span></td>
				</tr>
				<tr>
					<td><label>Branch</label></td>
					<td><span>{{repo.options.gitSource.branch}}</span></td>
				</tr>
				<tr>
					<td><label>Commit</label></td>
					<td><span>{{repo.options.gitSource.commit}}</span></td>
				</tr>
				<tr>
					<td><label>Custom Name</label></td>
					<td><span>{{repo.options.custom.name}}</span></td>
				</tr>
				<tr>
					<td><label>Type</label></td>
					<td><span>{{repo.options.custom.type}}</span></td>
				</tr>
				<tr ng-if="!isObjEmpty(repo.options.custom.sourceCode)">
					<td valign="top"><label>Source Code</label></td>
					<td style="padding: 10px"><span><pre><code class="javascript">{{repo.options.custom.sourceCode | json}}</code></pre></span>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<br>
</script>

<accordion close-others=false>
	<accordion-group is-open="true">
		<accordion-heading>Environment Details</accordion-heading>
		
		<div class="addEnvTable">
			<table>
				<tbody>
					<tr>
						<td><label>Type</label></td>
						<td>
							<span ng-if="envType ==='manual'">Manual Development</span>
							<span ng-if="envType ==='container'">Containerized Development</span>
							<span ng-if="envType ==='singleInfra'">Single Cloud Clustering</span>
						</td>
					</tr>
					<tr>
						<td><label>Code</label></td>
						<td><span>{{overview.data.code}}</span></td>
					</tr>
					<tr>
						<td><label>Description</label></td>
						<td><span>{{overview.data.description}}</span></td>
					</tr>
					<tr ng-if="overview.data.domain">
						<td><label>Domain</label></td>
						<td><span>{{overview.data.domain}}</span></td>
					</tr>
					<tr ng-if="overview.data.apiPrefix">
						<td><label>Api Prefix</label></td>
						<td><span>{{overview.data.apiPrefix}}</span></td>
					</tr>
					<tr ng-if="overview.data.sitePrefix">
						<td><label>Site Prefix</label></td>
						<td><span>{{overview.data.sitePrefix}}</span></td>
					</tr>
					<tr>
						<td><label>Sensitive</label></td>
						<td><span>{{overview.data.sensitive?true:false}}</span></td>
					</tr>
					<tr ng-if="overview.data.cookiesecret">
						<td><label>Cookie Secret</label></td>
						<td><span>{{overview.data.cookiesecret}}</span></td>
					</tr>
					<tr ng-if="overview.data.sessionName">
						<td><label>Session Name</label></td>
						<td><span>{{overview.data.sessionName}}</span></td>
					</tr>
					<tr ng-if="overview.data.sessionSecret">
						<td><label>Session Secret</label></td>
						<td><span>{{overview.data.sessionSecret}}</span></td>
					</tr>
					<tr>
						<td><label>Template</label></td>
						<td><span>{{wizard.template.name}}</span></td>
					</tr>
				</tbody>
			</table>
		</div>
	</accordion-group>
	
	<accordion-group is-open="true">
		<accordion-heading>Template</accordion-heading>
		
		<accordion-group is-open="true" ng-if="overview.data.deploy.selectedInfraProvider && (['docker', 'kubernetes'].includes(overview.data.deploy.technology))">
			<div>
				<accordion-heading>Container Technology</accordion-heading>
				<div ng-include="'modules/dashboard/environments/directives/add/overviewCluster.tmpl'"></div>
			</div>
			<br>
		</accordion-group>
		
		<accordion-group is-open="true" ng-if="!overview.data.deploy.selectedInfraProvider">
			<accordion-heading>Deployment Strategy</accordion-heading>
			
			<fieldset>
				<!--Manual-->
				<div class="alert alert-info">
					<h4><span class="icon icon-info"></span> Info:</h4>
					<p> I will not use any container technology to deploy my Service(s) and Daemon(s).
						I will also handle pulling and applying updates on the machines of this Environment myself.
					</p>
				</div>
			</fieldset>
		</accordion-group>
		
		<accordion-group is-open="true" ng-if="overview.vms && overview.vms.length > 0">
			<div>
				<accordion-heading>Virtual Machines</accordion-heading>
				<div ng-include="'modules/dashboard/environments/directives/add/overviewVMs.tmpl'"></div>
			</div>
			<br>
		</accordion-group>
		<br>
		
		<div ng-repeat="deployMain in ['database','deployments']">
			<div ng-repeat="(stepKey, stepData) in overview.template.deploy[deployMain]">
				<div ng-repeat="(stageKey, stageData) in overview.template.deploy[deployMain][stepKey]">
					
					<accordion-group is-open="true">
						<div ng-if="stageKey ==='custom_registry'">
							<accordion-heading>Custom Registry</accordion-heading>
							<ul class="nonBulletPoint">
								<li ng-repeat="obj in overview.template.deploy[deployMain][stepKey][stageKey].imfv" ng-include="stageKey+'.html'"></li>
							</ul>
						</div>
						
						<div ng-if="stageKey.includes('secrets.')">
							<accordion-heading>Secrets</accordion-heading>
							<ul class="nonBulletPoint">
								<li ng-repeat="obj in overview.template.deploy[deployMain][stepKey][stageKey].imfv" ng-include="'secrets.html'"></li>
							</ul>
						</div>
						
						<div ng-if="stageKey ==='productization'">
							<accordion-heading>Productization</accordion-heading>
							<ul class="nonBulletPoint">
								<li ng-repeat="product in wizard.template.content.productization.data" ng-include="'productization.html'"></li>
							</ul>
						</div>
						
						<div ng-if="stageKey ==='tenant'">
							<accordion-heading>Tenant</accordion-heading>
							<ul class="nonBulletPoint">
								<li ng-repeat="tenant in wizard.template.content.tenant.data" ng-include="'tenant.html'"></li>
							</ul>
						</div>
						
						<div ng-if="stageKey.includes('.resources')">
							<accordion-heading>
								<span class="capitalize">Resource {{overview.template.deploy[deployMain][stepKey][stageKey].imfv[0].name}}</span>
							</accordion-heading>
							<ul class="nonBulletPoint">
								<li ng-repeat="resource in overview.template.deploy[deployMain][stepKey][stageKey].imfv" ng-include="'resources.html'"></li>
							</ul>
						</div>
						
						<div ng-if="stageKey.includes('.repo')">
							<accordion-heading>
								{{overview.template.deploy[deployMain][stepKey][stageKey].imfv[0].name==='controller'?'SOAJS API Gateway':overview.template.deploy[deployMain][stepKey][stageKey].imfv[0].name}}
							</accordion-heading>
							<ul class="nonBulletPoint">
								<li ng-repeat="repo in overview.template.deploy[deployMain][stepKey][stageKey].imfv" ng-include="'repo.html'"></li>
							</ul>
						</div>
					
					</accordion-group>
					<br>
				</div>
			</div>
		</div>
	
	</accordion-group>

</accordion>

<div ng-include="'modules/dashboard/environments/directives/add/actions.tmpl'"></div>