<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Rspec HTML Reports - Overview</title>

  <!-- Bootstrap -->
  <link href="resources/bootstrap-4.0.0-dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="resources/bootstrap-4.0.0-dist/themes/bootstrap-theme-yeti.min.css" rel="stylesheet">

  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <script src="resources/js/jquery-1.11.1.min.js"></script>
  <script src="resources/bootstrap-4.0.0-dist/js/bootstrap.min.js"></script>
  <script src="resources/tether-1.3.3/js/tether.min.js"></script>
  <script src="resources/js/Chart.js"></script>
  <style>
      * {
          font-size: 14px;
      }

      <%= Rouge::Themes::Github.render(:scope => '.highlight') %>
  </style>
</head>
<body>
<div class="container">

  <div class="bs-docs-section clearfix">
    <div class="row">
      <div class="col-lg-12">

        <div class="bs-component">
          <div class="navbar navbar-inverse">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <p class="text-center" style="font-size:2em;">Overview</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">

    <div class="col-md-4">
      <div class="panel panel-default">

        <div class="panel-heading">Group Summary</div>
        <div class="panel-body">
          <span class="pull-right"><%= @total_examples %> Examples</span>
          <canvas id="pieChart" width="300" height="300"></canvas>
        </div>
      </div>

    </div>

  <div class="row">

    <div class="col-lg-12">

      <table class="table table-striped table-hover ">
        <thead>
        <tr>
          <th>#</th>
          <th>Group</th>
          <th>Duration</th>
          <th class="warning">Pending</th>
          <th class="danger">Failed</th>
          <th class="success">Passed</th>
          <th>Status</th>
        </tr>
        </thead>
        <tbody>
        <% i = 1 %>
        <% @overview.each do |group_name,group| %>
            <tr>
              <td><%= i %></td>
              <td>
                <a href="<%= group_name %>.html"><%= group[:group] %></a>
              </td>
              <td><%= group[:duration] %></td>
              <td class="warning"><span><%= group[:pending].size %></span></td>
              <td class="danger"><span><%= group[:failed].size %></span></td>
              <td class="success"><span><%= group[:passed].size %></span></td>
              <td><span class="label label-<%= group[:klass]%>"><%= group[:status] %></span></td>
            </tr>
        <% i+= 1%>
        <% end %>
        </tbody>
      </table>

    </div>
  </div>

</div>

<script type="text/javascript">

  var pieCtx = document.getElementById("pieChart");

  var pieChart = new Chart(pieCtx, {
    type: 'doughnut',
    data: {
        labels: ["Passed", "Failed", "Pending"],
        datasets: [{
          label: 'Examples',
          data: [<%= @passed %>, <%= @failed %>, <%= @pending %>],

          backgroundColor: [
            '#3c9a5f',
            '#ea2f10',
            '#e99002'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)'
          ],
          borderWidth: 1
        }]
    },
  });

</script>

</body>
</html>