<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <style>

   .number-container {padding: 20px; text-align: center;}
   .test-suite-container {margin: 50px;}
   .test-button {float: right;}
  </style>

  <title>Google Test Report</title>
</head>
<body>
  <div>
    <div class="card test-suite-container">
      <h5 class="card-header">{{ test_overview.name }}</h5>
      <div class="card-body">
        <div class="container">
          <div class="row">
            <div class="col-sm">

              <h4 class="number-container">
                <span class="badge badge-pill badge-primary">
                  Number of tests: {{ test_overview.tests }}
                </span>
              </h4>

            </div>
            <div class="col-sm">

              <h4 class="number-container">
                <span class="badge badge-pill badge-success">
                  Passed: {{ test_overview.tests - test_overview.failures - test_overview.disabled }}
                </span>
              </h4>

            </div>
            <div class="col-sm">

              <h4 class="number-container">
                <span class="badge badge-pill badge-danger">
                  Failed: {{ test_overview.failures }}
                </span>
              </h4>

            </div>
			      <div class="col-sm">

              <h4 class="number-container">
                <span class="badge badge-pill badge-warning">
                  Disabled: {{ test_overview.disabled }}
                </span>
              </h4>

            </div>
            <div class="col-sm">

              <h4 class="number-container">
                <span class="badge badge-pill badge-info">
                  Pass rate: {{ (test_overview.tests - test_overview.failures - test_overview.disabled) / test_overview.tests * 100 }} %
                </span>
              </h4>

            </div>
          </div>
        </div>

        <div class="list-group">
          {% for test_suite in test_suites %}
            <a href={{"#" + test_suite.name }} class="list-group-item list-group-item-action">
              {{ test_suite.name }}
            </a>
          {% endfor %}
        </div>
      </div>
    </div>

    {% for test_suite in test_suites %}
      <div class="card test-suite-container" id={{ test_suite.name }}>
        <div class="card-header">
          <h5>
            {{ test_suite.name }}
            <div class="btn-group btn-group-toggle test-button" data-toggle="buttons">
              <label class="btn btn-primary btn-sm active">
                <input type="radio" name="options" id={{ test_suite.name + "All"}} autocomplete="off" checked> Show All
              </label>
              <label class="btn btn-success btn-sm">
                <input type="radio" name="options" id={{ test_suite.name + "Passed"}} autocomplete="off"> Show Only Passed
              </label>
              <label class="btn btn-danger btn-sm">
                <input type="radio" name="options" id={{ test_suite.name + "Failed"}} autocomplete="off"> Show Only Failed
              </label>
			  <label class="btn btn-warning btn-sm">
                <input type="radio" name="options" id={{ test_suite.name + "Disabled"}} autocomplete="off"> Show Only Disabled
              </label>
            </div>
          </h5>
        </div>
        <div class="card-body">
          <div class="container">
            <div class="row">
              <div class="col-sm">

                <h4 class="number-container">
                  <span class="badge badge-pill badge-primary">
                    Number of tests: {{ test_suite.tests }}
                  </span>
                </h4>

              </div>
              <div class="col-sm">

                <h4 class="number-container">
                  <span class="badge badge-pill badge-success">
                    Passed: {{ test_suite.tests - test_suite.failures - test_suite.disabled }}
                  </span>
                </h4>

              </div>
              <div class="col-sm">

                <h4 class="number-container">
                  <span class="badge badge-pill badge-danger">
                    Failed: {{ test_suite.failures }}
                  </span>
                </h4>

              </div>
			        <div class="col-sm">

                <h4 class="number-container">
                  <span class="badge badge-pill badge-warning">
                    Disabled: {{ test_suite.disabled }}
                  </span>
                </h4>

              </div>
              <div class="col-sm">

                <h4 class="number-container">
                  <span class="badge badge-pill badge-info">
                    Pass rate: {{ (test_suite.tests - test_suite.failures - test_suite.disabled) / test_suite.tests * 100 }} %
                  </span>
                </h4>

              </div>
            </div>
          </div>

          <div class="accordion" id={{ test_suite.name + "FailedTests"}}>
            {% for test in test_suite.testsuite %}
              {% if test.failures %}
                <div class="card border-danger mb-3">
                  <div class="card-header" id={{ test.name + "FailedHeading" }}>
                    <h2 class="mb-0">
                      <button class="btn btn-link text-danger" type="button" data-toggle="collapse" data-target={{"#" + test.name + "FailedCollapse"}} aria-expanded="false" aria-controls={{ test.name + "FailedCollapse"}}>
                        {{ test.name }}
                      </button>
                    </h2>
                  </div>

                  <div id={{ test.name + "FailedCollapse" }} class="collapse" aria-labelledby={{ test.name + "FailedHeading" }} data-parent={{ "#" + test_suite.name + "FailedTests"}}>
                    <div class="card-body">
                      <h5 class="card-title">{{ "Time: " + test.time }}</h5>
                      {% for failure in test.failures %}
                        <p class="card-text">{{ "Failure: " + failure.failure }}</p>
                      {% endfor %}
                    </div>
                  </div>
                </div>
              {% endif %}
            {% endfor %}
          </div>
          <div class="accordion" id={{ test_suite.name + "PassedTests"}}>
            {% for test in test_suite.testsuite %}
              {% if test.status == "RUN" and not test.failures %}
                <div class="card border-success mb-3">
                  <div class="card-header" id={{ test.name + "PassedHeading" }}>
                    <h2 class="mb-0">
                      <button class="btn btn-link text-success" type="button" data-toggle="collapse" data-target={{"#" + test.name + "PassedCollapse"}} aria-expanded="false" aria-controls={{ test.name + "PassedCollapse"}}>
                        {{ test.name }}
                      </button>
                    </h2>
                  </div>

                  <div id={{ test.name + "PassedCollapse" }} class="collapse" aria-labelledby={{ test.name + "PassedHeading" }} data-parent={{ "#" + test_suite.name + "PassedTests"}}>
                    <div class="card-body">
                      <h5 class="card-title">{{ "Time: " + test.time }}</h5>
                    </div>
                  </div>
                </div>
              {% endif %}
            {% endfor %}
          </div>
		  <div class="accordion" id={{ test_suite.name + "DisabledTests"}}>
            {% for test in test_suite.testsuite %}
              {% if test.status == "NOTRUN" and not test.failures %}
                <div class="card border-warning mb-3">
                  <div class="card-header" id={{ test.name + "DisabledHeading" }}>
                    <h2 class="mb-0">
                      <button class="btn btn-link text-warning" type="button" data-toggle="collapse" data-target={{"#" + test.name + "DisabledCollapse"}} aria-expanded="false" aria-controls={{ test.name + "DisabledCollapse"}}>
                        {{ test.name }}
                      </button>
                    </h2>
                  </div>

                  <div id={{ test.name + "DisabledCollapse" }} class="collapse" aria-labelledby={{ test.name + "DisabledHeading" }} data-parent={{ "#" + test_suite.name + "DisabledTests"}}>
                    <div class="card-body">
                      <h5 class="card-title">Disabled Test</h5>
                    </div>
                  </div>
                </div>
              {% endif %}
            {% endfor %}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script>
    $("label").click(function()
    {
	  const testDesc = {"Passed": 6, "Failed": 6, "Disabled": 8}
	  const testDescAll = {"Passed": 6, "Failed": 6, "Disabled": 8, "All": 0}
      var testSuiteID = $(this).find("input").attr("id");
      showAll(testSuiteID);
	  
	  for (var testName in testDesc)
	  {
		var tempTestDesc = $.extend({}, testDesc);
		if (testSuiteID.includes(testName)) 
		{
		  // We need to hide everything other than the selected type
		  var testNameLen = tempTestDesc[testName]
		  delete tempTestDesc[testName]
		  for (var tempTestName in tempTestDesc)
		  {
			var tempSuite = generateTestSuiteName(testSuiteID, testNameLen, tempTestName);
			$(generateID(tempSuite)).hide();
		  }
		}
	  }

      function showAll(testSuiteID)
      {
		for (var testName in testDescAll)
	    {
		  var tempTestDesc = $.extend({}, testDescAll);
		  
		  if (testSuiteID.includes(testName)) 
		  {
		    // We want to show everything
		    for (var tempTestName in tempTestDesc)
		    {
			  $(generateID(testSuiteID.replace(testName, tempTestName))).show();
		    }
		  }
		}
      }
		
	  function generateTestSuiteName(testSuiteName, len, newName) {
		var tempName = testSuiteName.slice(0, -len) + newName;
		return tempName;
	  }
	  
      function generateID(testSuiteID) {
        return "#" + testSuiteID + "Tests";
      }
    })
  </script>
</body>
</html>
