<% if (typeof objectIdentifier === 'undefined') { %>

	<div class="panel panel-default">
		<div class="panel-heading">
			<h3>Upload Metadata document for QC</h3>
		</div>
		<div class="panel-body">
			<form id="mdqRunForm" method="POST" enctype="multipart/form-data">
				<input type="file" name="document" id="document"/>
				<input type="submit" value="Run" class="btn btn-default"/>
			</form>
		</div>
	</div>		

<% } %>

<div id="mdqResult">

<% if (typeof result !== 'undefined') { %>

<header class="page-header">
	<h1>Metadata Quality Report</h1>
	<cite id="mdqCitation"></cite>
</header>

<div class="mdq">
	<div id="mdqSummary">
		<!-- <p>Date: <em><%= timestamp %></em></p> -->
		<!--  Run ID: <%= id %>	-->
		<p>
		After running your metadata against our standard set of metadata, data, and congruency checks, 
		we have found the following potential issues. 
		Please assist us in improving the discoverability and reusability of your research data by addressing the issues below.
		</p>
	</div>
	
	<div id="mdqDonut" class="format-charts-data"></div>		
	
	<div id="mdqTypeSummary">			
		<div id="suites"></div>			
		
		<%
		var types = _.keys(groupedByType);
		_.each(types, function(type) {
			var results = groupedByType[type];
			var total = results.length;
			var success = 0;
			_.each(results, function(result) {
				if (result.status == "SUCCESS") {
					success++;
				}
			});
			var width = (success/total) * 100;
			width = width.toFixed(0);
			
		%>			
			<span class="strong" style="text-transform: capitalize;"><%=type%></span>: <%=width%>% complete
			<div class="progress">
				<div class="progress-bar progress-bar-success" 
				role="progressbar" 
				aria-valuenow="<%=success%>" 
				aria-valuemin="0" aria-valuemax="<%=total%>" 
				style="width: <%=width%>%;">
				
				</div>
			</div>
		<% }); %>		
	</div>
	<div class="clear"></div>	
			
		<%
		
		var total = result.length;
		if (groupedResults.BLUE) {
			total = total - groupedResults.BLUE.length;
		}
		
	%>	
	<ul class="list-group">
		<% if (groupedResults.GREEN) { %>
		
			<li class="list-group-item success row-fluid collapsed"  data-toggle="collapse" data-target=".list-group-item.pass">
				<h4>
					<i class="icon icon-caret-right"></i>
					<i class="icon icon-caret-down"></i>
					Passed <%=groupedResults.GREEN.length%> checks out of <%= total %>. Good job!
				</h4>				
			</li>
			
		<!-- <div class="collapse" id="collapseSuccess"> -->
		
		<%
		_.each(groupedResults.GREEN, function(result) {
		%>
		
	  		<li class="list-group-item check pass collapse row-fluid">
	  			<i class="icon icon-check-sign success span1"></i>	  			
	  			<span class="span6">
		  			<%
					_.each(result.output, function(output) {
					%>				
						<% if (output.type && output.type.includes('image')) { %>
							<!-- render the image -->
							<img src="data:<%- output.type %>;base64, <%- output.value %>"/>
						<% } else { %>
							<div class="check-output"><%- output.value %></div>
						<% } %>
					<%
					});
					%>
				</span>
				<span class="span1">
					<a  tabindex="0"
						role="button"
						class="popover-this" 
						data-trigger="hover focus"
						data-container="body"
						data-html="true"
						data-title="<%= result.check.name%>"
						data-content="<%= result.check.description %>">
						<i class="icon icon-question-sign subtle"></i>
					</a>
				</span>	  			
	  			<span class="span4">
		  			<span class="badge pull-right"><%= result.status %></span>
					<span class="badge pull-right"><%= result.check.level %></span>
					<span class="badge pull-right"><%= result.check.type %></span>
				</span>
	  		</li>
		<% }); %>			
	<% } %>	
	
	<% if (groupedResults.ORANGE) { %>	
		<li class="list-group-item warning collapsed" data-toggle="collapse" data-target=".list-group-item.warn.check">
			<h4>
				<i class="icon icon-caret-right"></i>
				<i class="icon icon-caret-down"></i>
				Warning for <%=groupedResults.ORANGE.length%> check<% if (groupedResults.ORANGE.length != 1) {print('s')}%>. <% if (groupedResults.ORANGE.length > 0) {print('Please review these warnings.')}%>			
			</h4>
		</li>	
		<%
		_.each(groupedResults.ORANGE, function(result) {
		%>
		
	  		<li class="list-group-item check warn collapse row-fluid">
	  			<span class="icon-stack span1">
	  				<i class="icon icon-exclamation"></i>
	  				<i class="icon icon-check-empty"></i>
	  			</span>
	  			
	  			<span class="span6">
		  			<%
					_.each(result.output, function(output) {
					%>				
						<% if (output.type && output.type.includes('image')) { %>
							<!-- render the image -->
							<img src="data:<%- output.type %>;base64, <%- output.value %>"/>
						<% } else { %>
							<div class="check-output"><%- output.value %></div>
						<% } %>
					<%
					});
					%>
				</span>
				<span class="span1">
					<a tabindex="0"
						role="button"
						class="popover-this" 
						data-container="body"
						data-trigger="hover focus"
						data-html="true"
						data-title="<%= result.check.name %>"
						data-content="<%= result.check.description %>">
					    <i class="icon icon-question-sign subtle"></i>
					</a>
	  			</span>
	  			<span class="span4">
		  			<span class="badge pull-right"><%= result.status %></span>
					<span class="badge pull-right"><%= result.check.level %></span>
					<span class="badge pull-right"><%= result.check.type %></span>
				</span>			
	  		</li>
		<% }); %>		
	<% } %>	
	
	<% if (groupedResults.RED) { %>
		<li class="list-group-item danger" data-toggle="collapse" data-target=".list-group-item.fail">
			<h4>
				<i class="icon icon-caret-down"></i>	
				<i class="icon icon-caret-right"></i>
				Failed <%=groupedResults.RED.length%> check<% if (groupedResults.RED.length != 1) {print('s')}%>. <% if (groupedResults.RED.length > 0) {print('Please correct these issues.')}%>			
			</h4>
		</li>
	
		<%
		_.each(groupedResults.RED, function(result) {
		%>
		
	  		<li class="list-group-item check fail in collapse row-fluid">
	  			<span class="icon-stack span1">
		  			<i class="icon icon-sign-blank"></i>
		  			<i class="icon icon-remove"></i>
	  			</span>
	  			<span class="span6">
		  			<%
					_.each(result.output, function(output) {
					%>				
						<% if (output.type && output.type.includes('image')) { %>
							<!-- render the image -->
							<img src="data:<%- output.type %>;base64, <%- output.value %>"/>
						<% } else { %>
							<div class="check-output"><%- output.value %></div>
						<% } %>
					<%
					});
					%>
				</span>
	  			<span class="span1">					
					<a  tabindex="0"
						role="button"
						class="popover-this" 
						data-container="body"
						data-trigger="hover focus"
						data-html="true"
						data-title="<%= result.check.name %>"
						data-content="<%= result.check.description %>">
						<i class="icon icon-question-sign subtle"></i>
					</a>
	  			</span>
	  			<span class="span4">
		  			<span class="badge pull-right"><%= result.status %></span>
					<span class="badge pull-right"><%= result.check.level %></span>
					<span class="badge pull-right"><%= result.check.type %></span>
				</span>			
	  		</li>
		<% }); %>		
	<% } %>	
	
	<% if (groupedResults.BLUE) { %>
		<li class="list-group-item info collapsed" data-toggle="collapse" data-target=".list-group-item.info-check">
			<h4>
				<i class="icon icon-caret-right"></i>
				<i class="icon icon-caret-down"></i>
				<%=groupedResults.BLUE.length%> informational check<% if (groupedResults.BLUE.length != 1) {print('s')}%>. These may include skips, errors and failures.
			</h4>
		</li>

		<%
		_.each(groupedResults.BLUE, function(result) {
		%>
			<li class="list-group-item check info-check collapse row-fluid">
	  			<span class="icon-stack span1">
		  			<i class="icon icon-check-empty"></i>
		  			<i class="icon icon-info"></i>
	  			</span>
	  			<span class="span6">
					<%
					_.each(result.output, function(output) {
					%>				
						<% if (output.type && output.type.includes('image')) { %>
							<!-- render the image -->
							<img src="data:<%- output.type %>;base64, <%- output.value %>"/>
						<% } else { %>
							<div class="check-output"><%- output.value %></div>
						<% } %>
					<%
					});
					%>
				</span>
	  			<span class="span1">					
					<a  tabindex="0"
						role="button"
						class="popover-this"
						data-container="body"
						data-trigger="hover focus" 
						data-html="true"
						data-title="<%=result.check.name%>"
						data-content="<%= result.check.description %>">
						<i class="icon icon-question-sign subtle"></i>
					</a>
	  			</span>
	  			<span class="span4">
					<span class="badge pull-right"><%= result.status %></span>
					<span class="badge pull-right"><%= result.check.level %></span>
					<span class="badge pull-right"><%= result.check.type %></span>
				</span>				
	  		</li>
		<% }); %>		
	<% } %>
	</ul>
  </div>
  
</div>

<% } %>
</div>