<div class="x_panel mb-3 ps-2 pe-3 ms-3">
    <table id="features-table" class="table-bordered display nowrap w-100" >
        <thead>
            <tr>
                <th class="feature-name text-center">Feature Name</th>
                <th class="feature-tags text-center"><i class="fa fa-tags text-center" title="Tags"></i></th>
                <th class="text-center feature-status">Status</th>
                <th class="feature-time text-center">Time</th>
                <%if(suite.results.overview.metadata.length > 0){%>
                    <% suite.results.overview.metadata.forEach(key =>{  %>
                        <th class="feature-metadata text-center"><%=key.name%></th>
                    <%});%>    
                <%}%>
                <th class="scenarios-total text-center">Total</th>
                <th class="scenarios-passed text-center">Passed</th>
                <th class="scenarios-failed text-center">Failed</th>
                <th class="scenarios-pending text-center">Pending</th>
                <th class="scenarios-skipped text-center">Skipped</th>
                <th class="scenarios-ambiguous text-center">Ambiguous</th>
                <th class="scenarios-undefined text-center">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.results.overview.metadata).length > 0){%>
                    <% Object.entries(suite.results.overview.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>
            </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 + '\n ', ''); %>
                            <% if (amount > 0 ){ %>
                                <i class="fa fa-tag<% if(amount > 1 ) {%>s<% } %>" data-bs-toggle="tooltip" data-placement="top"
                                title="<%= tags.trim() %>">
                                    <span><%= tags.trim() %></span>
                                </i>
                            <% } %>
                        <% } %>
                    </td>
                    <td class="text-center">
                        <% feature.results.overview.result.forEach( (result, index) =>{  %>
                            <i class="fa fa-<%= result.icon %>" data-bs-toggle="tooltip" data-placement="top" title="<%= result.status.toString() %>">
                            </i>
                        <%});%>
                    </td>
                    <td><%= feature.results.overview.durationHHMMSS %></td>
                    <% if(Object.entries(feature.metadata).length > 0){%>
                        <% feature.metadata.forEach(metadataElement => { %>
                            <td class="text-center">
                                <i class="<%= metadataElement.icon%>" data-bs-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="skipped-background 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>
                    <% } %>
                </tr>                                                 
            <% }); %>
        </tbody>
    </table>
</div>
