
<script type="text/ng-template" id="subsuite_renderer.html">
  <div class="test-specification-content">
    <span class="name" ng-bind="subsuite"></span>
  </div>
</script>

<h1>{{report.title}}</h1>
<div class="pull-right duration-report-datepicker">
  <span xl-widget-date ng-model="startDate" options="{label:'Choose a date', format : 'dd/MM/yyyy'}"></span>
  <span xl-widget-date ng-model="endDate" options="{label:'Choose a date', format : 'dd/MM/yyyy'}"></span>
</div>
<breadcrumb></breadcrumb>
<section class="container-fluid">
  <div class="row intro-row">
    <div class="col-sm-12">The duration trend report shows the trend in the time required to execute the test specification.
    Click a point or line in the report to go down one level. Use the breadcrumbs to go up.</div>
  </div>
  <div class="row duration-report-averages-header">
    <div class="col-sm-3"><strong>Suite Name: </strong><span>{{report.parentSuite}}</span></div>
    <div class="col-sm-3"><strong>Number of Runs: </strong><span>{{report.maxRunsInHistory}}</span></div>
    <div class="col-sm-6"><span></span></div>
  </div>
  <div class="row subsuite-list" ng-controller="OpenReport">
    <div class="col-sm-3">
      <label class="pull-right">
        {{checkAllFlag ? "Uncheck all" : "Check all"}}
        <input ng-model="checkAllFlag" ng-change="checkAll()" type="checkbox" ng-checked="checkAllFlag"/>
      </label>
      <div class="subsuite-name">SubSuite name</div>
      <hr/>

      <ul class="subsuite-selector-list" ng-if="subsuites">
        <li ng-repeat="subsuite in subsuites">
          <div class="test-specification-content">
            <label>
              <input ng-model="subsuite.checked" ng-change="toggleSeries(subsuite.name)" type="checkbox" ng-checked="subsuite.checked"/>
              <span class="name" ng-bind="subsuite.name"></span>
            </label>
          </div>
        </li>
      </ul>
    </div>
    <div class="col-sm-9 duration-report">
      <highchart config="report.bottomRight" thechart="thechart" style="width: 100%; height: 100%"></highchart>
    </div>
  </div>
</section>
