<% if (classes.length > 0) { %>
<div class="col-lg-6 mb-4">
  <div class="card shadow mb-4">
    <div class="card-header py-3" style="padding-bottom: 10px;">
      <h6 class="text-primary fw-bold m-0">Percentage</h6>
    </div>
    <!-- if classes are present, show the percentages -->
    <% classes.forEach(currentClass => { %>
    <!-- print the class details -->
    <% console.log(currentClass) %>
    <div class="card-body"">
      <h4 class="small fw-bold">
        <%- currentClass.ClassName %>
        <span class="float-end"><%= currentClass.Percentage%>%</span>
      </h4>
      <div class="progress mb-4">
        <div
          class="progress-bar bg-warning"
          aria-valuenow="<%= currentClass.Percentage %>"
          aria-valuemin="0"
          aria-valuemax="100"
          style="width: <%= currentClass.Percentage %>%"
        >
          <span class="visually-hidden"><%= currentClass.Percentage%> %</span>
        </div>
      </div>
    </div>
    <% });%>
    <!-- show this if no classes are present -->
    <% } %>

    <!-- ends here -->
  </div>
</div>

<!--

* template
* possible classes:  bg-danger bg-warning bg-primary bg-info bg-success

<h4 class="small fw-bold">
        Sales tracking<span class="float-end">40%</span>
</h4>
<div class="progress mb-4">
    <div
        class="progress-bar bg-warning"
        aria-valuenow="40"
        aria-valuemin="0"
        aria-valuemax="100"
        style="width: 40%"
    >
        <span class="visually-hidden">40%</span>
    </div>
</div>
-->
