<div class="row" >

<% if(userOfApps.length >= 1 || userOfApps.length == 0 ) { %>

	<% for (var i = 0; i < userOfApps.length; i++) { %>	
	<div class="col-md-4 col-sm-2">
				<div class="panel panel-inverse" data-sortable-id="index-6" style="border-top-left-radius:10px;border-top-right-radius:10px;">	
				  <div class="panel-heading" style="border-top-left-radius: 10px;border-top-right-radius: 10px;">
				  	<% if(userOfApps[i].icon){%>
				  	<span style="padding-left:10px;"><img src="<%= userOfApps[i].icon %>" class="logoBox"> </span>
				  	<%}%>
				  	<% if(!userOfApps[i].icon){%>
				  		<span style="padding-left:10px;"><img src="assets/img/app-store-logos.jpg" class="logoBox"> </span>	
				  	<%}%>
				  	<h4 class="panel-title" style="font-size: 20px;text-align: left;white-space: nowrap;text-overflow: ellipsis;overflow: hidden !important;margin-top:-23px;padding-left:50px;width:250px;"><%= userOfApps[i].name %></h4>
				  </div>				
					<div class="panel-body p-t-0">	
						<table style="width:100%;margin-left:-10px;margin-top:10px;">
							<tr style="margin-bottom:2px;" >
								<td class="widget-header"></td>
								<td class="widget-header"><i class="fa fa-2x fa-android"></i></td>
								<td class="widget-header"><i class="fa fa-2x fa-apple"></i></td>
								<td class="widget-header"><i class="fa fa-2x fa-globe"></i></td>
							</tr>
							<tr>
								<td class="widget-td">Installs</td>
								<td class="data" id="i_android_<%= userOfApps[i]._id %>"></td>
								<td class="data" id="i_ios_<%= userOfApps[i]._id %>"></td>
								<td class="data" id="i_web_<%= userOfApps[i]._id %>"></td>
							</tr>
							<tr >
								<td class="widget-td">Churned</td>
								<td class="data" id="c_android_<%= userOfApps[i]._id %>"></td>
								<td class="data" id="c_ios_<%= userOfApps[i]._id %>"></td>
								<td class="data" id="c_web_<%= userOfApps[i]._id %>"></td>
							</tr>
							
						</table>					
						<div  style="margin-bottom: -8px;text-align:center;">
							<% if(userOfApps[i].type && userOfApps[i].type == 'chatbot'){ %>
								<button type="button" class="btn btn-success chatbot_<%= userOfApps[i]._id %>" style="margin: 3px;">Dashboard</button>
							<% }else{ %>
								<button type="button" class="btn btn-success app_dashboard_btn_<%= userOfApps[i]._id %>"  style="margin: 3px;">Dashboard</button>		
							<% } %>
							<button type="button" class="btn btn-info app_setting_btn_<%= userOfApps[i]._id%>" style="margin: 3px;">Settings</button>
							<button type="button" class="btn btn-danger app_delete_btn_<%= userOfApps[i]._id%>"  href="#modal-alert" data-toggle="modal" style="margin: 3px;">Delete</button>
						</div>
					</div>
				</div>								
		</div>	
		<script nonce="<%=nonce%>">

			$('.app_dashboard_btn_<%= userOfApps[i]._id %>').click(function(){
				var app_id = "<%= userOfApps[0]._id %>";
				initAppDashboard('<%= userOfApps[i]._id %>')
			});
			$(".app_setting_btn_<%= userOfApps[i]._id%>").click(function(){
				navigateToUrl('/dashboard?app_id=<%= userOfApps[i]._id %>&action=appsetting');	
			});
			$(".app_delete_btn_<%= userOfApps[i]._id%>").click(function(){
				setDeleteInfo('<%= userOfApps[i]._id %>','<%=userOfApps[i].name %>');
			});
			$(".chatbot_<%= userOfApps[i]._id %>").click(function(){
				navigateToUrl('/dashboard?action=createchatbot#/createchatbot/dashboard/<%= userOfApps[i]._id %>')
			});

		</script>
									
							
		<% } %>	
	
	<% } %>
</div>	