<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha384-Ft/vb48LwsAEtgltj7o+6vtS2esTU9PCpDqcXs4OCVQFZu5BqprHtUCZ4kjK+bpE" crossorigin="anonymous"></script>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" integrity="sha384-rOuL3fofnnH7GPPPb2f67WUfBKYs133VKgf8XdxjPIlS5/YgJf/dly+Rs2KAZ/24" crossorigin="anonymous">
    <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js" integrity="sha384-8at6Iy2orlmk4xawCuXCOocKf2kQnZakSdUUy/uZVpllyY9QSUgo5JWNlMAugFBu" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/extensions/filter-control/bootstrap-table-filter-control.min.js" integrity="sha384-pAaLcAde7X+M80ngfMHGtPQ3OBBkoRBchgNw7ihMOwfJeJmDBbDy6gNsn3Eard3n" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/bootstrap-table@1.21.2/dist/extensions/toolbar/bootstrap-table-toolbar.min.js" integrity="sha384-iAFT227M9ZYSf6LjxhqNpsof4z0D5pEEqh+jT2QOK1Py4j05B9MQDR7cCQiwCumo" crossorigin="anonymous"></script>

    <title>Events</title>
    <style type="text/css">
    body * {
        font-size: 12px!important;
    }
    </style>
  </head>

<body>

<table
  id="events"
  class="table table-bordered table-hover table-sm"
  data-toggle="table"
  data-search="true"
  data-show-search-clear-button="true"
  data-filter-control="true"
  data-advanced-search="true"
  data-id-table="advancedTable"
  data-pagination="true"
  data-page-size="100"
  data-show-columns-toggle-all="true"
  data-show-pagination-switch="true"
  data-show-columns="true">
  <thead>
    <tr>
      <th data-width="100" data-field="time" data-filter-control="input" data-sortable="true">Time</th>
      <th data-width="200" data-field="namespace" data-filter-control="input" data-sortable="true">Namespace</th>
      <th data-width="200" data-field="component" data-filter-control="input" data-sortable="true">Component</th>
      <th data-width="200" data-field="host" data-filter-control="input" data-sortable="true">Host</th>
      <th data-width="200" data-field="relatedobject" data-filter-control="input" data-sortable="true">RelatedObject</th>
      <th data-field="reason" data-filter-control="input">Reason</th>
      <th data-field="message" data-filter-control="input">Message</th>
    </tr>
  </thead>
  <tbody>
    {{range . }}
    <tr>
      <td>{{formatTime .ObjectMeta.CreationTimestamp .FirstTimestamp .LastTimestamp .Count}}</td>
      <td>{{.Namespace}}</td>
      <td>{{.Source.Component}}</td>
      <td>{{.Source.Host}}</td>
      <td>{{.InvolvedObject.Name}}</td>
      <td {{reasonClass .Reason}}>{{.Reason}}</td>
      <td>{{.Message}}</td>
    </tr>
    {{end}}
  </tbody>
</table>

	<script>
    $(function() {
      $('#events').bootstrapTable()
    })
	</script>
  </body>
</html>