<em>{{application['description']}}</em><br>
<em>{{translation.defaultPackage[LANG]}} - <b>{{application['package']}}</b></em>
<br>
<div ng-if="access.tenant.appKeys.list">
	<div style="clear:both; height:30px; padding-bottom:5px;"><b>{{translation.tenantProductsKeys[LANG]}}:</b>
		<a ng-if="access.tenant.appKeys.add" href="" class="btn btn-primary btn-sm btn-ssm consoleKey" ng-click="updateConfiguration(consoleTenant['_id'], application['appId'], application['package'],  application.keys[0].key, 'dashboard', application.keys[0].config['dashboard']);">{{translation.editServiceConfiguration[LANG]}}</a>
	</div>
	<div class="keysAccordion">
		<accordion close-others="true" ng-show="application.keys.length > 0">
			<accordion-group ng-repeat="key in application.keys" ng-click="openSubContent(key.key, $index); toggleOpen();">
				<accordion-heading tooltip="{{translation.displayKeyInformation[LANG]}}">
					<span class="icon icon-key"></span>{{key.key}}
				</accordion-heading>
				<span>
					<div ng-if="access.tenant.externalKeys.add">
						<button ng-click="addNewExtKey(consoleTenant['_id'], application['appId'], key.key)" class="btn btn-primary btn-sm consoleKey">{{translation.addNewProductExternalKey[LANG]}}</button>
					</div>
				</span>
				<br/>
				<div class="small-text" id="externalKeys{{$index}}">
					<ul style="display:none;">
						<li ng-repeat="extnlKey in key.extKeys">
							<span style="word-break: break-all;">{{extnlKey.extKey|trimmed100}}</span>
						</li>
					</ul>
					<nglist></nglist>
					<div class="grid externalKeysGrid" ng-show="key.extKeys.length>0">
						<table cellspacing="0" cellpadding="0" border="0" width="100%" class="">
							<tbody>
								<tr>
									<th colspan="2"></th>
									<th> {{translation.externalKey[LANG]}}</th>
									<th> {{translation.dashboardAccess[LANG]}}</th>
									<th> {{translation.environment[LANG]}}</th>
									<th class="text-align-center width100"> {{translation.status[LANG]}}</th>
									<th> {{translation.expiryDate[LANG]}}</th>
								</tr>
								<tr ng-repeat="extnlKey in key.extKeys" ng-class-even="'even'" ng-class-odd="'odd'" ng-class="{'first': $first, 'last': $last, selected:extnlKey.selected}">
									
									<td class="leftAction">
										<a ng-if="access.tenant.externalKeys.update" ng-click="editExtKey(consoleTenant['_id'], application['appId'], extnlKey, key.key)" href="">
											<span class="icon icon-pencil2" tooltip="{{translation.editExternalKey[LANG]}}"></span>
										</a>
									</td>
									<td class="leftAction">
										<a ng-if="access.tenant.externalKeys.delete" ng-click="removeExtKey(consoleTenant['_id'], application['appId'], extnlKey, key.key)" ng-confirm-click="{{translation.areYouSureWantRemoveExternalKey[LANG]}}" href="">
											<span class="icon icon-cross" tooltip="{{translation.removeExternalKey[LANG]}}"></span>
										</a>
									</td>
									<td> {{extnlKey.extKey}}</td>
									<td class="text-align-center" ng-if="extnlKey['dashboardAccess']">
										{{translation.yes[LANG]}}
									</td>
									<td class="text-align-center" ng-if="!extnlKey['dashboardAccess']">
										{{translation.no[LANG]}}
									</td>
									<td> {{extnlKey.env}}</td>
									<td ng-if="extnlKey.deprecated" class="text-align-center deprecated">
										<span class="icon icon-cross"></span>{{translation.deprecated[LANG]}}
									</td>
									<td ng-if="!extnlKey.deprecated" class="text-align-center valid">
										<span class="icon icon-checkmark"></span>{{translation.valid[LANG]}}
									</td>
									<td> {{extnlKey.expDate|date}}</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</accordion-group>
		</accordion>
	</div>
</div>
