<div class="x_title">
    <h2>Scenarios</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="scenario-chart"></canvas>
                <div class="total"><%= scenarios.total%></div>
            </td>
            <td>
                <table class="tile_info">
                    <tr>
                        <td>
                            <p data-toggle="tooltip" data-placement="left" title="Scenario passed">
                                <i class="fa fa-check-circle passed-color"></i>
                                Passed
                            </p>
                        </td>
                        <td class="percentage"><%= scenarios.passedPercentage %> %</td>
                    </tr>
                    <tr>
                        <td>
                            <p data-toggle="tooltip" data-placement="left" title="Scenario failed">
                                <i class="fa fa-exclamation-circle failed-color"></i>
                                Failed
                            </p>
                        </td>
                        <td class="percentage"><%= scenarios.failedPercentage %> %</td>
                    <% if (scenarios.ambiguous > 0) { %>
                    <tr>
                        <td>
                            <p data-toggle="tooltip" data-placement="left"
                               title="Scenario has double step implementation and failed because of that.">
                                <i class="fa fa-flash ambiguous-color"></i>
                                Ambiguous
                            </p>
                        </td>
                        <td class="percentage"><%= scenarios.ambiguousPercentage %> %</td>
                    </tr>
                    <% } %>
                    <% if (scenarios.notDefined > 0) { %>
                    <tr>
                        <td>
                            <p data-toggle="tooltip" data-placement="left" title="Scenario has no step implmentation.">
                                <i class="fa fa-question-circle not-defined-color"></i>
                                Not defined
                            </p>
                        </td>
                        <td class="percentage"><%= scenarios.notDefinedPercentage %> %</td>
                    </tr>
                    <% } %>
                    </tr>
                    <% if (scenarios.pending > 0) { %>
                    <tr>
                        <td>
                            <p data-toggle="tooltip" data-placement="left" title="Scenario is pending">
                                <i class="fa fa-minus-circle pending-color"></i>
                                Pending
                            </p>
                        </td>
                        <td class="percentage"><%= scenarios.pendingPercentage %> %</td>
                    </tr>
                    <% } %>
                    <% if (scenarios.skipped > 0) { %>
                    <tr>
                        <td>
                            <p data-toggle="tooltip" data-placement="left" title="Scenario is skipped">
                                <i class="fa fa-arrow-circle-right skipped-color"></i>
                                Skipped
                            </p>
                        </td>
                        <td class="percentage"><%= scenarios.skippedPercentage %> %</td>
                    </tr>
                    <% } %>
                </table>
            </td>
        </tr>
        <% if (!overviewPage && suite.displayDuration) { %>
            <tr>
                <th> Total duration:</th>
                <tr><td><%= feature.time %></td></tr>
            </tr>
        <% } %>
    </table>
</div>