<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>
                        <% _.each(suite.features[0].metadata, function(metadatum, metadatumIndex) { %>
                        <th><%= metadatum.name %></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">
                            <% 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>
                        <% _.each(feature.metadata, function(metadatum, metadatumIndex) { %>
                        <td>
                            <%=metadatum.value%>
                        </td>
                        <% }); %>
                        <% if (suite.displayDuration) { %>
                        <td><%= feature.time %></td>
                        <% } %>
                        <td><%= feature.scenarios.total %></td>
                        <td><%= feature.scenarios.passed %></td>
                        <td><%= feature.scenarios.failed %></td>
                        <% if(+suite.scenarios.skipped > 0) { %>
                        <td><%= feature.scenarios.skipped %></td>
                        <% } %>
                        <% if(+suite.scenarios.pending > 0) { %>
                        <td><%= feature.scenarios.pending %></td>
                        <% } %>
                        <% if(+suite.scenarios.notDefined > 0) { %>
                        <td><%= feature.scenarios.notDefined %></td>
                        <% } %>
                        <% if(+suite.scenarios.ambiguous > 0) { %>
                        <td><%= feature.scenarios.ambiguous %></td>
                        <% } %>
                    </tr>
                    <% }); %>
                    </tbody>

                </table>
            </div>
        </div>
    </div>
</div>