<% if (attendance.length > 0) { %>
<div class="col" id="log">
  <div class="card shadow mb-4">
    <div class="card-header py-3">
      <h6 class="text-primary fw-bold m-0">Attendance Log</h6>
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-md-6 text-nowrap">
          <div
            id="dataTable_length-1"
            class="dataTables_length"
            aria-controls="dataTable"
          >
            <label class="form-label visually-hidden"
              >Show&nbsp;<select
                class="d-inline-block form-select form-select-sm"
              >
                <option value="10" selected="">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option></select
              >&nbsp;</label
            >
            <label class="form-label">
              Showing <%- attendance.length %> entries</label
            >
          </div>
        </div>
        <div class="col-md-6">
          <div class="text-md-end dataTables_filter" id="dataTable_filter-1">
            <label class="form-label"
              ><input
                type="search"
                disabled
                class="form-control form-control-sm"
                aria-controls="dataTable"
                placeholder="Search"
            /></label>
          </div>
        </div>
      </div>
      <div
        class="table-responsive table mt-2"
        id="dataTable-1"
        role="grid"
        aria-describedby="dataTable_info"
      >
        <!-- a hidden form that stores a input named 'attendanceID' and the action is '/delete-attendance' -->
        <form
          class="visually-hidden"
          id="delete-attendance-form"
          action="/delete-attendance"
          method="POST"
        >
          <input type="text" name="attendanceID" value="" />
        </form>
        <!-- data table -->
        <table class="table my-0" id="dataTable">
          <thead>
            <tr>
              <% let columns =["ID", "User", "Class","Date", "Status", `Total
              Class Attended`, "Total Class Taken", "Percentage", `Skip Reason`,
              " Delete (not working atm)"]; %>
              <!-- create all the columns -->
              <% columns.forEach(element => { %>
              <th><%= element %></th>
              <% }) %>
            </tr>
          </thead>
          <tbody>
            <% attendance.forEach(row => { %>
            <tr>
              <!-- create all the columns -->
              <td><%- row.AttendanceID %></td>
              <td><%- row.UserName %></td>
              <td><%- row.ClassName %></td>
              <td><%- row.Date.toISOString().slice(0, 10) %></td>
              <td><%- row.Status %></td>
              <td><%- row.totalClassAttended %></td>
              <td><%- row.totalClassTaken %></td>
              <td><%- row.Percentage %>%</td>
              <td><%- row.SkipReason == null ? '-' : row.SkipReason %></td>
              <td>
                <button
                  type="button"
                  disabled
                  class="btn btn-danger px-2 py-0"
                  onclick="deleteAttendance(<%- row.AttendanceID %>)"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="16"
                    height="16"
                    fill="currentColor"
                    class="bi bi-x"
                    viewBox="0 0 16 16"
                  >
                    <path
                      d="M3.854 3.146a.5.5 0 0 1 0 .708L8.293 8l-4.44 4.44a.5.5 0 1 1-.708-.708L7.293 8 2.146 2.854a.5.5 0 0 1 .708-.708L8 7.293l4.44-4.44a.5.5 0 1 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.44 4.44a.5.5 0 0 1-.708-.708L7.293 8 2.854 3.854a.5.5 0 0 1 .708-.708z"
                    />
                  </svg>
                </button>
              </td>
            </tr>
            <% }) %>
          </tbody>
          <!-- TODO: unhide (remove the 'visually-hidden' class) only if there are more than 5 rows above -->
          <tfoot class="visually-hidden">
            <tr>
              <!-- create all the columns -->
              <% columns.forEach(element => { %>
              <th><%= element %></th>
              <% }) %>
            </tr>
          </tfoot>
        </table>
      </div>
      <div class="row visually-hidden">
        <div class="col-md-6 align-self-center">
          <p
            id="dataTable_info-1"
            class="dataTables_info"
            role="status"
            aria-live="polite"
          >
            Showing 1 to 10 of 27
          </p>
        </div>
        <div class="col-md-6">
          <nav
            class="d-lg-flex justify-content-lg-end dataTables_paginate paging_simple_numbers"
            aria-label="pagination"
          >
            <ul class="pagination">
              <li class="page-item disabled">
                <a class="page-link" aria-label="Previous" href="#"
                  ><span aria-hidden="true">«</span></a
                >
              </li>
              <li class="page-item active">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">2</a>
              </li>
              <li class="page-item">
                <a class="page-link" href="#">3</a>
              </li>
              <li class="page-item">
                <a class="page-link" aria-label="Next" href="#"
                  ><span aria-hidden="true">»</span></a
                >
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
    <ul class="list-group list-group-flush"></ul>
  </div>
</div>
<% } %>

<!--

* template
<tr>
    <td>
      <img
        class="rounded-circle me-2"
        width="30"
        alt=""
        height="30"
        src="images/avatars/avatar5.jpeg"
      />Cedric Kelly
    </td>
    <td>Senior JavaScript Developer</td>
    <td>Edinburgh</td>
    <td>22</td>
    <td>2012/03/29<br /></td>
    <td>$433,060</td>
  </tr>
-->
