<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>
