{% extends "base.html" %}

{% block title %} Home{% endblock %}

{% block extra_js %}
<script type="text/javascript">
  $(document).ready(function () {
    const table = $(".table").DataTable({
      paging: false,
      info: false,
      ordering: false,
      createdRow: function(row, data, dataIndex) {
        if(data.status) {
          $(row).addClass("table-success");
        } else {
          $(row).addClass("table-danger");
        }
      },
      ajax: {
        url: "/status/list",
        dataSrc: "",
        headers: {
          Authorization: "Bearer vincent",
        }
      },
      columns: [
        {data: "name"},
        {
          data: "status",
          render: function (data, type, row, meta) {
            return data ? "Ready" : "Not Ready";
          }
        }
      ],
    });
  
    $("#resetButton").on("click", function(event) {
      event.preventDefault();
      $.ajax({
        url: "/reset",
        method: "GET",
        crossDomain: true,
        cache: false,
        beforeSend: function (xhr) {
          xhr.setRequestHeader("Authorization", "Bearer vincent");
        },
        success: function (data) {
          table.ajax.reload();
        },
        error: function (jqXHR, textStatus, errorThrown) {
          console.log(errorThrown);
        }
      });
    });
  });
</script>
{% endblock %}

{% block content %}
<button id="resetButton" type="submit" class="btn btn-primary">Reset Database</button>
<div class="row">
  <div class="col">
  <h2 class="mb-3">Home</h2>
    <table class="table table-striped table-hover table-bordered" style="width: 100%;">
      <thead>
        <tr>
          <th>Name</th>
          <th>Status</th>
        </tr>
      </thead>
    </table>
  </div>
</div>
{% endblock %}