<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>
                        
                        <% if(+suite.app > 0) { %>
                        <th>App</th>
                        <% } %>
                        <% if (suite.displayDuration) { %>
                        <th>Duration</th>
                        <% } %>
                        <th>Total</th>
                        <th>Passed</th>
                        <th>Failed</th>
                        <% if(+suite.scenarios.pending > 0) { %>
                        <th>Pending</th>
                        <% } %>
                        <% if(+suite.scenarios.skipped > 0) { %>
                        <th>Skip</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">
                            <% 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>
                        
                        
                        <% if(+suite.app > 0) { %>
                        <td>
                            <% if(feature.metadata.app) { %>
                            <%= feature.metadata.app.name %> <br>V: <%= feature.metadata.app.version %>
                            <% } %>
                        </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>
