<div class="x_title">
    <h2>Features</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">
    <table class="chart">
        <tr>
            <th>
                <p>Chart</p>
            </th>
            <th>
                <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
                    <p class="">Status</p>
                </div>
                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
                    <p class="" style="float:right;">Progress</p>
                </div>
            </th>
        </tr>
        <tr>
            <td class="chart">
                <canvas id="feature-chart"></canvas>
                <div class="total"><%= suite.featureCount.total%></div>
            </td>
            <td>
                <table class="tile_info">
                    <tr>
                        <td>
                            <p data-toggle="tooltip" data-placement="left" title="Features passed">
                                <i class="fa fa-check-circle passed-color"></i>
                                Passed
                            </p>
                        </td>
                        <td class="percentage"><%= suite.featureCount.passedPercentage %> %</td>
                    </tr>
                    <tr>
                        <td>
                            <p data-toggle="tooltip" data-placement="left" title="Features failed">
                                <i class="fa fa-exclamation-circle failed-color"></i>
                                Failed
                            </p>
                        </td>
                        <td class="percentage"><%= suite.featureCount.failedPercentage %> %</td>
                    </tr>
                    <%if(suite.featureCount.ambiguous > 0){%>
                    <tr>
                        <td>
                            <p data-toggle="tooltip" data-placement="left"
                               title="Features has double step implementation and failed because of that.">
                                <i class="fa fa-flash ambiguous-color"></i>
                                Ambiguous
                            </p>
                        </td>
                        <td class="percentage"><%= suite.featureCount.ambiguousPercentage %> %</td>
                    </tr>
                    <%}%>
                    <%if(suite.featureCount.notDefined > 0){%>
                    <tr>
                        <td>
                            <p data-toggle="tooltip" data-placement="left"
                               title="Features with undefined step definitions.">
                                <i class="fa fa-question-circle not-defined-color"></i>
                                Not Defined
                            </p>
                        </td>
                        <td class="percentage"><%= suite.featureCount.notDefinedPercentage %> %</td>
                    </tr>
                    <%}%>
                    <%if(suite.featureCount.pending > 0){%>
                    <tr>
                        <td>
                            <p data-toggle="tooltip" data-placement="left"
                               title="Features pending.">
                                <i class="fa fa-minus-circle pending-color"></i>
                                Pending
                            </p>
                        </td>
                        <td class="percentage"><%= suite.featureCount.pendingPercentage %> %</td>
                    </tr>
                    <%}%>
                    <%if(suite.featureCount.skipped > 0){%>
                    <tr>
                        <td>
                            <p data-toggle="tooltip" data-placement="left"
                               title="Features skipped">
                                <i class="fa fa-arrow-circle-right skipped-color"></i>
                                Skipped
                            </p>
                        </td>
                        <td class="percentage"><%= suite.featureCount.skippedPercentage %> %</td>
                    </tr>
                    <%}%>

                </table>
            </td>
        </tr>
    </table>
</div>