<!DOCTYPE html>
<html lang="en">
<head>
  <title>AMI-VAL Test Report</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
</head>
<body>

<div class="container-fluid">
  <h2>AMI-VAL Test Report</h2>
  <p>This report is generated by <a href='https://pypi.org/project/ami-val/'>ami-val</a> for displaying RHEL AMIs validation result.</p>   
  <hr class="solid">
   <!-- Table -->
   <table class="table table-bordered">
    <tr>
    <td>Summary</td><td>Total:<b>{{ result.case_total|e }}</b>, PASS:<b class="text-success">{{ result.case_pass|e }}</b>, FAIL:<b class="text-danger">{{ result.case_fail|e }}</b>, SKIP:<b class="text-warning">{{ result.case_skip|e }}</b>, ERROR:<b class="text-danger">{{ result.case_error|e }}</b> - success rate of <b>{{ result.pass_rate|e }}</b>% (excluding SKIP and CANCEL)</tr>
    <tr>
    <td>Regions Uploaded</td><td>{{ region_uploaded|e }}</td></tr>
    <tr>
    <td>Regions Missed</td><td>{{ region_missed|e }}</td></tr>
   </table>
  <table id="result" class="table table-hover table-bordered">
    <thead>
     <tr>
        <th>AMI</th>
        <th>Region</th>
        <th>Name</th>
        <th>CaseName</th>
        <th>Result</th>
        <th>Error</th>
        <th>Debug</th>
    </tr></thead>
    <tbody>
        {% for row in result.cases %}
        <tr>
          <td>{{ row[0]|e }}</td><td>{{ row[1]|e }}</td><td>{{ row[2]|e }}</td><td>{{ row[3]|e }}</td><td>{{ row[4]|e }}</td><td>{{ row[5]|e }}</td><td><a href={{ row[6]|e }}>debug</a></td>
        </tr>
      {% endfor %}
    </tbody>
</table>
</div>

</body>
</html>
<script>
$(document).ready(function() {
$('#result').DataTable();
});
</script>