<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Monitor</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!-- Font Awesome-->
    <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
</head>
<body>
<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Website Name</th>
      <th scope="col">URL</th>
      <th scope="col">Request Date</th>
      <th scope="col">Status</th>
      <th scope="col">Response Time[s]</th>
      <th scope="col">Meets Requirements</th>
      <th scope="col">Errors</th>
    </tr>
  </thead>
  <tbody>
      {% for record in records %}
        <tr>
          <th scope="row">{{ loop.index }}</th>
          <td>{{ record[1] }}</td>
          <td><a href="{{record[2]}}">{{ record[2] }}</a></td>
          <td>{{ record[3] }}</td>
          <td>{{ record[4] }}</td>
          <td>{{ record[5] }}</td>
          <td>{% if record[6] %}<i class="fas fa-check"></i> {% else %}<i class="fas fa-times"></i>{% endif %}</td>
          <td>{{ record[7] }}</td>
        </tr>
      {% endfor %}
  </tbody>
</table>


<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
