<div class="x_panel mb-4 pl-2 pr-3 ml-3">
    <table id="features-table" class="table-bordered display nowrap w-100" >
        <thead>
            <tr>
                <th colspan="1"></th>
                <th class="header" colspan=3>Features</th>
                <%if(Object.entries(suite.metadata).length > 0){%>
                    <th class="metadata" colspan=<%=Object.entries(suite.metadata).length%>>Custom Data</th>
                <%}%>    
                <th class="header" colspan=7>Scenarios</th>
                <th class="header" colspan=7>Steps</th>
            </tr>
            <tr>
                <th class="feature-name">Feature Name</th>
                <th class="feature-tags"><i class="fa fa-tags" title="Tags"></i></th>
                <th class="feature-status">Status</th>
                <th class="feature-time">Time</th>
                <%if(suite.metadata.length > 0){%>
                    <% suite.metadata.forEach(key =>{  %>
                        <th class="feature-metadata"><%=key.name%></th>
                    <%});%>    
                <%}%>
                <th class="scenarios-total">Total</th>
                <th class="scenarios-passed">Passed</th>
                <th class="scenarios-failed">Failed</th>
                <th class="scenarios-pending">Pending</th>
                <th class="scenarios-skipped">Skipped</th>
                <th class="scenarios-ambiguous">Ambiguous</th>
                <th class="scenarios-undefined">Undefined</th>
                <th class="steps-total">Total</th>
                <th class="steps-passed">Passed</th>                
                <th class="steps-failed">Failed</th>
                <th class="steps-pending">Pending</th>
                <th class="steps-skipped">Skipped</th>
                <th class="steps-ambiguous">Ambiguous</th>
                <th class="steps-undefined">Undefined</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <td> <%=suite.features.length %> </td>
                <td></td>
                <td></td>
                <td><%= suite.results.overview.durationHHMMSS %></td>
                <%if(Object.entries(suite.metadata).length > 0){%>
                    <% Object.entries(suite.metadata).forEach((key) =>{  %>
                        <td></td>
                    <%});%>    
                <%}%>    
                <td><%= suite.results.scenarios.total %></td>
                <td><%= suite.results.scenarios.passed %></td>
                <% if(suite.results.scenarios.failed > 0){ %>
                    <td class="failed-background text-light"><%= suite.results.scenarios.failed %></td>
                <%}else{%>
                    <td><%= suite.results.scenarios.failed %></td>
                <% } %>
                <td class="pending-background text-light"><%= suite.results.scenarios.pending %></td>
                <td class="skipped-background text-light"><%= suite.results.scenarios.skipped %></td>
                <td class="ambiguous-background text-light"><%= suite.results.scenarios.ambiguous %></td>
                <td class="undefined-background text-light"><%= suite.results.scenarios.undefined %></td>
                <td><%= suite.results.steps.total %></td>  
                <td><%= suite.results.steps.passed %></td>
                <td class="failed-background text-light"><%= suite.results.steps.failed %></td>
                <td class="pending-background text-light"><%= suite.results.steps.pending %></td>
                <td class="skipped-background text-light"><%= suite.results.steps.skipped %></td>
                <td class="ambiguous-background text-light"><%= suite.results.steps.ambiguous %></td>
                <td class="undefined-background text-light"><%= suite.results.steps.undefined %></td>
            </tr>
        </tfoot>

        <tbody>
        <% suite.features.forEach((feature, featureIndex) => { %>
            <tr>
                <td class="">
                    <a class="" href="features/<%= feature.id %>.html"><%= feature.name %></a>
                </td>
                <td class="text-center">
                    <% if (feature.tags) { %>
                    <% var amount = feature.tags.length; %>
                    <% var tags = feature.tags.reduce((tags, tag) => tags + tag.name + ' ', ''); %>
                    <% if (amount > 0 ){ %>
                        <i class="fa fa-tag<% if(amount > 1 ) {%>s<% } %>" data-toggle="tooltip" data-placement="top"
                        title="<%= tags.trim() %>">
                            <span><%= tags.trim() %></span>
                        </i>
                    <% } %>
                    <% } %>
                </td>
                <td class="text-center">
                    <% feature.results.overview.statusIcons.forEach( (icon, index) =>{  %>
                    <i class="fa fa-<%= icon %>" data-toggle="tooltip" data-placement="top" title="<%= feature.results.overview.status[index] %>">
                        <span><%= feature.results.overview.status[index] %></span>
                    </i>
                    <%});%>
                </td>
                <td><%= feature.results.overview.durationHHMMSS %></td>
                <% if(Object.entries(suite.metadata).length > 0){%>
                    <% suite.metadata.forEach(metadataElement => { %>
                        <td class="text-center">
                            <i class="<%= metadataElement.value.icon%>" data-toggle="tooltip" data-placement="top"
                                title="<%= metadataElement.value %>">
                            </i>
                            <span><%= metadataElement.value %></span>
                        </td>
                    <%});%>
                <% } %>         
                <td><%= feature.results.scenarios.total %></td>
                <td><%= feature.results.scenarios.passed %></td>
                <% if(feature.results.scenarios.failed > 0){ %>
                    <td class="failed-background text-light"><%= feature.results.scenarios.failed %></td>
                <% }else{ %>
                    <td><%= feature.results.scenarios.failed %></td>
                <% } %>
                <% if(feature.results.scenarios.pending > 0){ %>
                    <td class="pending-background text-light"><%= feature.results.scenarios.pending %></td>
                <% }else{ %>
                    <td><%= feature.results.scenarios.pending %></td>
                <% } %>
                <% if(feature.results.scenarios.skipped > 0){ %>
                    <td class="bg-info text-light"><%= feature.results.scenarios.skipped %></td>
                <% }else{ %>
                    <td><%= feature.results.scenarios.skipped %></td>
                <% } %>
                <% if(feature.results.scenarios.ambiguous > 0){ %>
                    <td class="ambiguous-background text-light"><%= feature.results.scenarios.ambiguous %></td>
                <% }else{ %>
                    <td><%= feature.results.scenarios.ambiguous %></td>
                <% } %>
                <% if(feature.results.scenarios.undefined > 0){ %>
                    <td class="undefined-background text-light"><%= feature.results.scenarios.undefined %></td>
                <% }else{ %>
                    <td><%= feature.results.scenarios.undefined %></td>
                <% } %>

                <% // steps %>                                                          
                <td><%= feature.results.steps.total %></td>  
                <td><%= feature.results.steps.passed %></td>
                <% if(feature.results.steps.failed > 0){ %>
                    <td class="failed-background text-light"><%= feature.results.steps.failed %></td>
                <% }else{ %>
                    <td><%= feature.results.steps.failed %></td>
                <% } %>
                <% if(feature.results.steps.pending > 0){ %>
                    <td class="pending-background text-light"><%= feature.results.steps.pending %></td>
                <% }else{ %>
                    <td><%= feature.results.steps.pending %></td>
                <% } %>           
                <% if(feature.results.steps.skipped > 0){ %>
                    <td class="skipped-background text-light"><%= feature.results.steps.skipped %></td>
                <% }else{ %>
                    <td><%= feature.results.steps.skipped %></td>
                <% } %>    
                <% if(feature.results.steps.ambiguous > 0){ %>
                    <td class="ambiguous-background text-light"><%= feature.results.steps.ambiguous %></td>
                <% }else{ %>
                    <td><%= feature.results.steps.ambiguous %></td>
                <% } %>                                                                                                                           
                <% if(feature.results.steps.undefined > 0){ %>
                    <td class="undefined-background text-light"><%= feature.results.steps.undefined %></td>
                <% }else{ %>
                    <td><%= feature.results.steps.undefined %></td>
                <% } %> 
            </tr>                                                 
            <% }); %>
        </tbody>
    </table>
</div>