<div class="card">
  <div class="card-header pb-0">
    <div class="row">
      <div class="col-lg-6 col-7">
        <h6>Exams overview</h6>
      </div>
    </div>
  </div>

  <div class="card-body p-3">
    <div id="simple-exam-table">loading</div>
  </div>

</div>

<script>
  window.addEventListener("DOMContentLoaded", (event) => {
    console.log("DOM fully loaded and parsed");

    fetch('/dt/getSimpleExams', {})
      .then(res => res.json())
      .then(res_json => {
        temp = ""
        for (i = 0; i < res_json.length; i++) {
          subject = res_json[i].subject['subjectTitle']
          date = res_json[i].date
          title = res_json[i].title
          temp = temp +
            `<tr>
                    <th scope="row" style="font-size: 0.75rem; text-align: center">${i+1}</th>
                    <td style="font-size: 0.75rem;" >${subject}</td>
                    <td style="font-size: 0.75rem;" >${date}</td>
                    <td style="font-size: 0.75rem;" >${title}</td>
                </tr>
                `
        }

        if (res_json.length > 0) {
          document.querySelector('#simple-exam-table').outerHTML = `
<table class="table table-sm table-striped">
    <thead>
        <tr>
        <th scope="col" style="font-size: 0.75rem; text-align: center; padding: 0.75rem 0.25rem">#</th>
        <th scope="col" style="font-size: 0.75rem; text-align: left; padding: 0.75rem 0.25rem">Subject</th>
        <th scope="col" style="font-size: 0.75rem; text-align: left; padding: 0.75rem 0.25rem">Date</th>
        <th scope="col" style="font-size: 0.75rem; text-align: left; padding: 0.75rem 0.25rem">Title</th>
        </tr>
    </thead>
    <tbody>
        ${temp}
    </tbody>
</table>
`
        } else {
          document.querySelector('#simple-exam-table').outerHTML =
            'no schedule currently active';
        }
      })
  });
</script>
