<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>Features overview</h2>
<ul class="nav navbar-right panel_toolbox">
<li>
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="table-responsive">
<table id="features-table" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0"
width="100%">
<thead>
<tr>
<th>Feature name</th>
<th><i class="fa fa-tags fa-lg" title="Tags"></i></th>
<th>Status</th>
<% if (!suite.hideMetadata) { %>
<th class="text-center">
<i class="fa fa-desktop fa-lg"></i>
<i class="fa fa-mobile fa-lg"></i>
</th>
<th>Device</th>
<th>OS</th>
<% if(+suite.app > 0) { %>
<th>App</th>
<% } %>
<% if(+suite.browser > 0) { %>
<th>Browser</th>
<% } %>
<% } %>
<% if (suite.displayReportTime) { %>
<th>Date</th>
<% } %>
<% if (suite.displayDuration) { %>
<th>Duration</th>
<% } %>
<th>Total</th>
<th>Passed</th>
<th>Failed</th>
<% if(+suite.scenarios.skipped > 0) { %>
<th>Skip</th>
<% } %>
<% if(+suite.scenarios.pending > 0) { %>
<th>Pending</th>
<% } %>
<% if(+suite.scenarios.notDefined > 0) { %>
<th>Undefined</th>
<% } %>
<% if(+suite.scenarios.ambiguous > 0) { %>
<th>Ambiguous</th>
<% } %>
</tr>
</thead>
<tbody>
<% _.each(suite.features, function(feature, featureIndex) { %>
<tr>
<td>
<a href="features/<%= feature.id %>.html"><%= feature.name %></a>
</td>
<td class="text-center">
<% _.each(feature.elements, function(element, elementIndex) { %>
<% if(element.tags && element.tags.length > 0) { %>
<% _.each(element.tags, function(tag, tagIndex) { %>
<% if(feature.tags && feature.tags.filter(t=>t.name==tag.name).length==0) feature.tags.push(tag) %>
<% }) %>
<% } %>
<% }) %>
<% if (feature.tags) { %>
<% var amount = feature.tags.length; %>
<% var tags = _.reduce(feature.tags, (tags, tag) => tags + tag.name + ' ', ''); %>
<% if (amount > 0 ){ %>
<i class="fa fa-tag<% if(amount > 1 ) {%>s<% } %> fa-lg" data-toggle="tooltip" data-placement="top"
title="<%= tags.trim() %>">
<span><%= tags.trim() %></span>
</i>
<% } %>
<% } %>
</td>
<td class="text-center">
<% var statusIcon; %>
<% var status; %>
<% if (feature.isFailed) { %>
<% status = 'Failed'; %>
<% statusIcon = 'exclamation-circle failed-color'; %>
<% } else if (feature.isAmbiguous) { %>
<% status = 'Ambiguous'; %>
<% statusIcon = 'flash ambiguous-color'; %>
<% } else if (feature.isNotdefined) { %>
<% status = 'Not Defined'; %>
<% statusIcon = 'question-circle not-defined-color'; %>
<% } else if (feature.isPending) { %>
<% status = 'Pending'; %>
<% statusIcon = 'minus-circle pending-color'; %>
<% } else if (feature.isSkipped) { %>
<% status = 'Skipped'; %>
<% statusIcon = 'arrow-circle-right skipped-color'; %>
<% } else { %>
<% status = 'Passed'; %>
<% statusIcon = 'check-circle passed-color'; %>
<% } %>
<i class="fa fa-<%= statusIcon %> fa-lg" data-toggle="tooltip" data-placement="top" title="<%= status %>">
<span><%= statusIcon %></span>
</i>
</td>
<% if (!suite.hideMetadata) { %>
<td class="text-center">
<% var deviceType; %>
<% var deviceIcon; %>
<% if (['android','ios'].indexOf(feature.metadata.platform.name.toLowerCase()) > -1 ) { %>
<% deviceType = 'Mobile / Tablet'; %>
<% deviceIcon = 'mobile'; %>
<% } else if (['windows', 'osx', 'linux', 'ubuntu'].indexOf(feature.metadata.platform.name.toLowerCase()) > -1) { %>
<% deviceType = 'Desktop'; %>
<% deviceIcon = 'desktop'; %>
<% } else if (feature.metadata.platform.name.toLowerCase().startsWith('win')) { %>
<% deviceType = 'Desktop'; %>
<% deviceIcon = 'desktop'; %>
<% } else { %>
<% deviceType = 'Not known'; %>
<% deviceIcon = 'question-circle not-defined-color'; %>
<% } %>
<i class="fa fa-<%= deviceIcon %> fa-lg" data-toggle="tooltip" data-placement="top" title="<%= deviceType %>">
<span><%= deviceIcon %></span>
</i>
</td>
<td>
<% var device; %>
<% if (feature.metadata.device === 'not known' || feature.metadata.device === '') { %>
<% device = '<i class="fa fa-question-circle not-defined-color fa-lg"></i> not known'; %>
<% } else { %>
<% device = feature.metadata.device; %>
<% } %>
<%= device %>
</td>
<td>
<% var platformName; %>
<% if (feature.metadata.platform.name.toLowerCase() === 'ios' || feature.metadata.platform.name.toLowerCase() === 'osx') { %>
<% platformName = 'apple'; %>
<% } else if (feature.metadata.platform.name.toLowerCase() === 'android') { %>
<% platformName = 'android'; %>
<% } else if (feature.metadata.platform.name.toLowerCase() === 'windows' || feature.metadata.platform.name.toLowerCase().startsWith('win')) { %>
<% platformName = 'windows'; %>
<% } else if (feature.metadata.platform.name.toLowerCase() === 'ubuntu' ||
feature.metadata.platform.name.toLowerCase() === 'linux') { %>
<% platformName = 'linux'; %>
<% } else { %>
<% platformName = 'question-circle not-defined-color'; %>
<% } %>
<i class="fa fa-<%= platformName%> fa-lg"><span><%= platformName %></span></i>
<%= feature.metadata.platform.version %>
</td>
<% if(+suite.app > 0) { %>
<td>
<% if(feature.metadata.app) { %>
<%= feature.metadata.app.name %> <br>V: <%= feature.metadata.app.version %>
<% } %>
</td>
<% } %>
<% if(+suite.browser > 0) { %>
<td>
<% if(feature.metadata.browser) { %>
<% var browserIcon; %>
<% if (['firefox', 'safari', 'chrome'].indexOf(feature.metadata.browser.name.toLowerCase()) > -1) { %>
<% browserIcon = feature.metadata.browser.name.toLowerCase(); %>
<% } else if (feature.metadata.browser.name.toLowerCase() === 'edge' || feature.metadata.browser.name.toLowerCase() === 'microsoftedge' ||
feature.metadata.browser.name.toLowerCase() === 'msedge'){ %>
<% browserIcon= "edge"; %>
<% } else if (feature.metadata.browser.name.toLowerCase() === 'internet explorer'){ %>
<% browserIcon= "internet-explorer"; %>
<% } else { %>
<% browserIcon = 'question-circle not-defined-color'; %>
<% }%>
<% if (feature.metadata.browser.name.toLowerCase().includes('headless')) { %>
<svg class="headless" width="20" height="20">
<title><%= feature.metadata.browser.name %></title>
</svg>
<span style="vertical-align: bottom">
<%= feature.metadata.browser.version %>
</span>
<% } else { %>
<i class="fa fa-<%= browserIcon %> fa-lg">
<span><%= feature.metadata.browser.name.toLowerCase() %></span></i>
<%= feature.metadata.browser.version %>
<% } %>
<% } %>
</td>
<% } %>
<% } %>
<% if (suite.displayReportTime) { %>
<td><%= feature.metadata.reportTime%></td>
<% } %>
<% if (suite.displayDuration) { %>
<td><%= feature.time %></td>
<% } %>
<td class="text-right <%= !feature.scenarios.total ? 'none' : '' %>"><%= feature.scenarios.total %></td>
<td class="text-right <%= !feature.scenarios.passed ? 'none' : '' %>"><%= feature.scenarios.passed %></td>
<td class="text-right <%= !feature.scenarios.failed ? 'none' : '' %>"><%= feature.scenarios.failed %></td>
<% if(+suite.scenarios.skipped > 0) { %>
<td class="text-right <%= !feature.scenarios.skipped ? 'none' : '' %>"><%= feature.scenarios.skipped %></td>
<% } %>
<% if(+suite.scenarios.pending > 0) { %>
<td class="text-right <%= !feature.scenarios.pending ? 'none' : '' %>"><%= feature.scenarios.pending %></td>
<% } %>
<% if(+suite.scenarios.notDefined > 0) { %>
<td class="text-right <%= !feature.scenarios.notDefined ? 'none' : '' %>"><%= feature.scenarios.notDefined %></td>
<% } %>
<% if(+suite.scenarios.ambiguous > 0) { %>
<td class="text-right <%= !feature.scenarios.ambiguous ? 'none' : '' %>"><%= feature.scenarios.ambiguous %></td>
<% } %>
</tr>
<% }); %>
</tbody>
</table>
</div>
</div>
</div>
</div>