<!DOCTYPE html>
<html>
  <head>
    <title><%= report.name %></title>
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" >
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/css/lightbox.min.css" >
    <style type="text/css">
      <%= styles %>
    </style>
    <meta charset="UTF-8">
  </head>
  <body>

    <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <div class="project-name visible-md visible-lg"><%= report.name %></div>
          <div class="label-container">
            <span class="label label-success" title=<%= allSuites.reportAs %>>Passed: <%= allSuites.passed %></span>
            <% if (allSuites.failed != 0) { %><span class="label label-danger" title=<%= allSuites.reportAs %>>Failed: <%= allSuites.failed %></span> <% } %>
			<% if (allSuites.skipped != 0) { %><span class="label label-warning" title=<%= allSuites.reportAs %>>Skipped: <%= allSuites.skipped %></span> <% } %>
            <span class="label label-info">Time Elapsed: <%= allSuites.totalTime %></span>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
	
    <div class="generated-on"><%= report.time %></div>
	
    <!--<div class="generated-on"><b>Platform:</b> <%= report.platform %></div>
    <div class="info"><b>Browser:</b> <%= report.browser %> <%= report.browserVersion %></div>
    <div class="info"><b>Generated on:</b> <%= report.time %></div>-->


      <div class="row">
        <div class="chart col-lg-6 col-md-6" id="piechart_testsuites"></div>
        <div class="chart col-lg-6 col-md-6" id="piechart_testcases"></div>
      </div>
	  
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
            <a data-toggle="collapse" href="#logOutput">
              <i class="glyphicon glyphicon-chevron-right"></i>
              <i class="glyphicon glyphicon-chevron-down"></i>
              <b>Environment</b>
            </a>
          </h4>
        </div>
        <div id="logOutput" class="panel-collapse collapse">
          <div class="panel-body">
            <div class="row">
              <div class="clearfix metadata col-xs-12 col-sm-6 col-md-6 col-lg-6">
                  <div class="pull-left">
                    <strong> Browser: </strong><%= report.browser %> <%= report.browserVersion %>
                  </div>
                  <div class="pull-right">
                    <strong> Platform: </strong><%= report.platform %>
                  </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <%= testsuites %>

    </div>


    <div class="navbar-fixed-bottom row-fluid footer-div ">
      <div class="navbar-inner">
        <div class="footer-container">
          <a  target="_blank" href="https://www.npmjs.com/package/protractor-html-reporter-2">
            <div class="text-muted footer-link">
              generated by @protractor-html-reporter-2
            </div>
             </a>
        </div>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.1/js/lightbox.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(function() {drawChart({
                                                              "title": "TestSuites",
                                                              "passed": <%= suitesSummary.passed %>,
                                                              "failed": <%= suitesSummary.failed %>,
        })
      });
      google.charts.setOnLoadCallback(function() {drawChart({
                                                              "title": "TestCases",
                                                              "passed": <%= allSuites.passed %>,
                                                              "skipped": <%= allSuites.skipped %>,
                                                              "errors": <%= allSuites.errors %>,
                                                              "failed": <%= allSuites.failed %>
        })
      });

    </script>
    <script>
      <%= piechart %>
    </script>

  </body>
</html>
