{% extends 'base2.html' %}
{% load static %}
{% load home_tags %}
{% block title %}
<title>{{early.student.first_name}} {{early.student.last_name}}'s {{early.term.term}} Term {{early.term.session}} Report Sheet</title>
<style type="text/css">

@media print {
  #printbtn {
      display :  none;
  }
  .table-responsive {
    overflow: visible !important;
  }

  .row {
    display: block !important;
    page-break-inside: avoid !important;
  }

  [class*="col-"] {
    float: left !important;
    display: block !important;
    min-height: 1px;
  }

  .col-md-1 { width: 8.333333% !important; }
  .col-md-2 { width: 16.666667% !important; }
  .col-md-3 { width: 25% !important; }
  .col-md-4 { width: 33.333333% !important; }
  .col-md-5 { width: 41.666667% !important; }
  .col-md-6 { width: 50% !important; }
  .col-md-7 { width: 58.333333% !important; }
  .col-md-8 { width: 66.666667% !important; }
  .col-md-9 { width: 75% !important; }
  .col-md-10 { width: 83.333333% !important; }
  .col-md-11 { width: 91.666667% !important; }
  .col-md-12 { width: 100% !important; }

  table {
    table-layout: fixed !important;
    width: 100% !important;
    border-collapse: collapse !important;
  }

  td, th {
    word-wrap: break-word !important;
    vertical-align: middle !important;
  }

  body {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    zoom: 100% !important;
  }

  #printbtn {
    display: none !important;
  }

  /* Keep images aligned and proportional */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  .report {
    page-break-inside: avoid !important;
  }
}

.comment-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  page-break-inside: avoid !important;
  width: 100% !important;
}

.comment-row.row {
  display: flex !important;
}

.comment-row .col-md-5  { flex: 0 0 55% !important; max-width: 55% !important; min-width: 0 !important; }
.comment-row .col-md-2  { flex: 0 0 15% !important; max-width: 15% !important; min-width: 0 !important; }
.comment-row .col-md-1  { flex: 0 0 7%  !important; max-width: 7%  !important; min-width: 0 !important; }
.comment-row .col-md-3  { flex: 0 0 23% !important; max-width: 23% !important; min-width: 0 !important; }


.comment-row .col-md-4 { flex:0 0 33.333% !important; max-width:33.333% !important; }

.comment-row .col-md-5,
.comment-row .col-md-2,
.comment-row .col-md-1,
.comment-row .col-md-3 {
  box-sizing: border-box !important;
  overflow: visible !important;
}

.comment-row p {
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

.comment-row .sig,
.comment-row .sig2 {
  max-height: 60px !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

@media print {
  .comment-row { display: flex !important; }
}

.comment-row .p3 {
  display: inline-block;
  margin: 0;
}

.bg-A1 {
  background-color: #1b5e02 !important; }

.bg-B2 {
  background-color: #268701 !important; }

.bg-B3 {
  background-color: #2fa802 !important; }

.bg-C4 {
  background-color: #3bcf02 !important; }

.bg-C5 {
  background-color: #8dfc17 !important; }

.bg-C6 {
  background-color: #b3fc17 !important; }

.bg-D7 {
  background-color: #e9fc17 !important; }

.bg-E8 {
  background-color: #fc8617 !important; }

.bg-F9 {
  background-color: #ff0000 !important; }

  table,
    td {
      border-style: solid black;
    }
  </style>
{% endblock title %}

{% block content %}
<form class="text-center">
  <input id ="printbtn" type="button" class="btn btn-apu-purple" value="Click to show print preview" onclick="window.print();" >
</form> <br>
{% for early in class_students_list %}

<div class="text-center">
  <div class="bg-white text-dark form-group col-md-12">
    <div class="row">
      <div class="col-md-2">
        <br>
        <h5 class="text-right"><img src="{% static 'img/logo.png' %}" alt="Logo" class="logo3"></h5>
      </div>
      <div class="col-md-8">
        <h2 class="text-center text-apu-purple p7"><strong>HOMIK OIL AND GAS FACILITY ENGINEERING SCHOOL</strong></h2>
        <p class="text-center text-apu-purple lh"><strong>Golden Estate, Off NTA-CHOBA Road, Behind Open University, Port Harcourt, Rivers State.</strong></p>
        <p class="text-center text-apu-purple lh"><strong class="text-apu-purple">Tel: <span class="text-dark">084554401, 084554402, 08061181600</span></strong></p>
        <p class="text-center text-apu-purple lh"><strong class="text-apu-purple">Email: <span class="text-dark">homik01@yahoo.com</span></strong></p>
        <h6 class="text-center text-apu-purple"><strong>Session: <span class="text-dark">{{early.term.session}} </span> &nbsp&nbsp&nbsp&nbsp&nbsp&nbspTerm: <span class="text-dark">{{early.term.term}}</span> </strong></h6>
      </div>
      <div class="col-md-2 mt-4">
        {% if early.static_student_image %}
          <h5 class="text-left"><img src="{{ early.static_student_image.url }}" alt="student's Photograph" class="logo3"></h5>
        {% else %}
          <h5 class="text-left"><i class="fas fa-user fa-8x text-apu-purple"></i> </h5>
        {% endif %}
      </div>
    </div>

    <div class="row comment-row">
      <div class="col-md-4">
        <h6 class="text-apu-purple text-left"><strong>1. ATTENDANCE RECORD</strong></h6>
        <div class="table-responsive">
          <table class="table table-sm table-bordered">
            <tr class="table-light">
              <td class="text-left text-apu-purple"><strong>Frequencies</strong></td>
              <td class="text-center text-dark"><strong>School Attendance</strong></td>
            </tr>
            <tr class="table-light">
              <td class="text-left text-apu-purple"><strong>No of times school opened</strong></td>
              <td class="text-center text-dark"><strong>{{early.term.number}}</strong></td>
            </tr>
            <tr class="table-light">
              <td class="text-left text-apu-purple"><strong>No of times present</strong></td>
              <td class="text-center text-dark"><strong>{{early.number_present}}</strong></td>
            </tr>
            <tr class="table-light">
              <td class="text-left text-apu-purple"><strong>No of times absent</strong></td>
              <td class="text-center text-dark"><strong>{{early.number_absent}}</strong></td>
            </tr>
          </table>
        </div>
      </div>
      <div class="col-md-3">
      </div>
      <div class="col-md-1">
      </div>

      <div class="col-md-4">
        <h6 class="text-apu-purple text-left"><strong>2. PERSONAL DETAILS</strong></h6>
        <div class="table-responsive">
          <table class="table table-sm table-bordered">
            <tr class="table-light">
              <td class="text-left text-apu-purple"><strong>Admission Number</strong></td>
              <td class="text-center text-dark"><strong>{{early.student.username}}</strong></td>
            </tr>
            <tr class="table-light">
              <td class="text-left text-apu-purple"><strong>Name</strong></td>
              <td class="text-center text-dark"><strong>{{early.student.first_name}} {{early.student.last_name}}</strong></td>
            </tr>
            <tr class="table-light">
              <td class="text-left text-apu-purple"><strong>Sex</strong></td>
              <td class="text-center text-dark"><strong>{{early.student.gender}}</strong></td>
            </tr>
            <tr class="table-light">
              <td class="text-left text-apu-purple"><strong>Age</strong></td>
              <td class="text-center text-dark"><strong>{{early.student.age}} years</strong></td>
            </tr>
            <tr class="table-light">
              <td class="text-left text-apu-purple"><strong>Class</strong></td>
              <td class="text-center text-dark"><strong>{{early.static_class}}</strong></td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <h6 class="text-apu-purple text-left"><strong>3. COGNITIVE PERFORMANCE</strong></h6>
        <div class="table-responsive">
          <table class="table table-sm table-bordered">
            <tbody class="table-light">
              <tr class="bg-white">
                <th rowspan="2" class="text-center text-apu-purple"><strong><br><br>Subjects</strong></th>
                <th colspan="2" class="text-center text-apu-purple"><br>1ST CA</th>
                <th colspan="2" class="text-center text-apu-purple"><br>2ND CA</th>
                <th colspan="2" class="text-center text-apu-purple"><br>ASSIGNMENT</th>
                <th colspan="2" class="text-center text-apu-purple"><br>EXAMINATION</th>
                <th class="text-center text-apu-purple"><br>TOTAL</th>
                <th rowspan="2" class="text-center text-apu-purple"><br><br><br>GRADE</th>
                <th rowspan="2" class="text-center text-apu-purple"><br><br><br>CLASS AVERAGE</th>
                <th rowspan="2" class="text-center text-apu-purple"><br><br><br>POSITION IN CLASS</th>
                <th rowspan="2" class="text-center text-apu-purple"><br><br><br>REMARK</th>
              </tr>
              <tr>
                <th class="text-center text-apu-purple">Marks Obtainable</th>
                <th class="text-center text-apu-purple">Marks Obtained</th>
                <th class="text-center text-apu-purple">Marks Obtainable</th>
                <th class="text-center text-apu-purple">Marks Obtained</th>
                <th class="text-center text-apu-purple">Marks Obtainable</th>
                <th class="text-center text-apu-purple">Marks Obtained</th>
                <th class="text-center text-apu-purple">Marks Obtainable</th>
                <th class="text-center text-apu-purple">Marks Obtained</th>
                <th class="text-center text-apu-purple"><br>(100)</th>
              </tr>
              {% for each in earlys %}
              {% if each.student == early.student  %}
              <tr class="table-light">
                <td style="font-size:12px" class="text-left text-dark"><strong>{{each.subject.subject}}</strong></td>
                <td style="font-size:12px" class="text-dark text-center tab"><strong>10</strong></td>
                <td style="font-size:12px" class="text-dark text-center tab"><strong>{{each.ca1}}</strong></td>
                <td style="font-size:12px" class="text-dark text-center tab"><strong>10</strong></td>
                <td style="font-size:12px" class="text-dark text-center tab"><strong>{{each.ca2}}</strong></td>
                <td style="font-size:12px" class="text-dark text-center tab"><strong>10</strong></td>
                <td style="font-size:12px" class="text-dark text-center tab"><strong>{{each.ass}}</strong></td>
                <td style="font-size:12px" class="text-dark text-center tab"><strong>70</strong></td>
                <td style="font-size:12px" class="text-dark text-center tab"><strong>{{each.exam}}</strong></td>
                <td style="font-size:12px" class="text-dark text-center tab"><strong>{{each.total}}</strong></td>
                {% if each.total > 74 %}
                <td style="background:#1b5e02!important; font-size:12px" class="text-white text-center"><strong>{{each.grade}}</strong></td>
                {% elif each.total > 69 %}
                <td style="background:#268701!important; font-size:12px" class="text-white text-center"><strong>{{each.grade}}</strong></td>
                {% elif each.total > 64 %}
                <td style="background:#2fa802!important; font-size:12px" class="text-white text-center"><strong>{{each.grade}}</strong></td>
                {% elif each.total > 59 %}
                <td style="background:#3bcf02!important; font-size:12px" class="text-white text-center"><strong>{{each.grade}}</strong></td>
                {% elif each.total > 54 %}
                <td style="background:#8dfc17!important; font-size:12px" class="text-white text-center"><strong>{{each.grade}}</strong></td>
                {% elif each.total > 49 %}
                <td style="background:#b3fc17!important; font-size:12px" class="text-white text-center"><strong>{{each.grade}}</strong></td>
                {% elif each.total > 44 %}
                <td style="background:#e9fc17!important; font-size:12px" class="text-black text-center"><strong>{{each.grade}}</strong></td>
                {% elif each.total > 39 %}
                <td style="background:#fc8617!important; font-size:12px" class="text-white text-center"><strong>{{each.grade}}</strong></td>
                {% elif each.total < 40 %}
                <td style="background:#ff0000!important; font-size:12px" class="text-white text-center"><strong>{{each.grade}}</strong></td>
                {% endif %}
                <td class="text-dark text-center tab"><strong>{{each.subject_avg}}</strong></td>
                <td class="text-dark text-center tab"><strong>{{each.subject_pos|my_suffix}}/{{class_students_count}}</strong></td>
                <td class="text-dark text-center"><strong>{{each.grade_remark}}</strong></td>
              </tr>
              {% endif %}
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <h6 class="text-apu-purple text-left p1"><strong>OVERALL: <u> <span class="text-dark">&nbsp&nbsp{{early.cumulative}}/{{early.all_obtainable}}&nbsp&nbsp</span> </u> </strong></h6>
      </div>
      <div class="col-md-2">
        <h6 class="text-apu-purple text-center p1"><strong>%: <u> <span class="text-dark">&nbsp&nbsp{{early.cum_perc}}&nbsp&nbsp</span> </u> </strong></h6>
      </div>
      <div class="col-md-2">
        <h6 class="text-apu-purple text-center p1"><strong>GRADE: <u> <span class="text-dark">&nbsp&nbsp{{early.grade_general}}&nbsp&nbsp</span> </u> </strong></h6>
      </div>
      <div class="col-md-3">
        <p class="text-apu-purple text-center lh"><strong>GRADES' KEY</strong></p>
        <p class="text-dark text-left lh">75 - 100 <strong class="bg-A1 text-white">A1</strong> Distinction</p>
        <p class="text-dark text-left lh">70 - 74 <strong class="bg-B2 text-white">B2</strong> Excellent</p>
        <p class="text-dark text-left lh">65 - 69 <strong class="bg-B3 text-white">B3</strong> Very Good</p>
        <p class="text-dark text-left lh">60 - 64 <strong class="bg-C4 text-white">C4</strong> Good</p>
        <p class="text-dark text-left lh">55 - 59 <strong class="bg-C5">C5</strong> Credit</p>
      </div>
      <div class="col-md-2">
        <br>
        <p class="text-dark text-left lh">50 - 54 <strong class="bg-C6">C6</strong> Credit</p>
        <p class="text-dark text-left lh">45 - 49 <strong class="bg-D7">D7</strong> Pass</p>
        <p class="text-dark text-left lh">40 - 44 <strong class="bg-E8 text-white">E8</strong> Pass</p>
        <p class="text-dark text-left lh">0 - 39 <strong class="bg-F9 text-white">F9</strong> Fail</p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-5">
        <h6 class="text-apu-purple text-left"><strong>4. AFFECTIVE DISPOSITION</strong></h6>
          <table class="table table-sm table-bordered">
            <tr class="table-light">
              <td style="font-size:12px" class="text-apu-purple"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong>5</strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong>4</strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong>3</strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong>2</strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong>1</strong></td>
            </tr>

            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Attentiveness</strong></td>
              {% if early.attentiveness == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.attentiveness == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.attentiveness == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.attentiveness == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.attentiveness == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Attitude to School Work</strong></td>
              {% if early.attitude == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.attitude == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.attitude == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.attitude == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.attitude == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Cooperation with Others</strong></td>
              {% if early.cooperation == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.cooperation == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.cooperation == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.cooperation == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.cooperation == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Emotional Stability</strong></td>
              {% if early.emotional == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.emotional == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.emotional == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.emotional == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.emotional == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Health</strong></td>
              {% if early.health == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.health == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.health == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.health == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.health == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Helping Others</strong></td>
              {% if early.helping == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.helping == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.helping == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.helping == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.helping == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Leadership</strong></td>
              {% if early.leadership == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.leadership == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.leadership == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.leadership == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.leadership == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Neatness</strong></td>
              {% if early.neatness == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.neatness == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.neatness == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.neatness == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.neatness == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Perseverance</strong></td>
              {% if early.perseverance == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.perseverance == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.perseverance == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.perseverance == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.perseverance == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Politeness</strong></td>
              {% if early.politeness == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.politeness == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.politeness == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.politeness == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.politeness == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Punctuality</strong></td>
              {% if early.punctuality == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.punctuality == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.punctuality == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.punctuality == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.punctuality == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Speaking & Writing</strong></td>
              {% if early.speaking == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.speaking == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.speaking == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.speaking == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.speaking == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
          </table>
      </div>
      <div class="col-md-2">
        <br>
        <br>
        <br>
        <br>
        <br>
        <h6 class="text-apu-purple text-left"><strong>KEY</strong></h6>
        <h6 class="text-dark text-left">5 - Excellent</h6>
        <h6 class="text-dark text-left">4 - Good</h6>
        <h6 class="text-dark text-left">3 - Fair</h6>
        <h6 class="text-dark text-left">2 - Poor</h6>
        <h6 class="text-dark text-left">1 - Very Poor</h6>
      </div>
      <div class="col-md-5">
        <h6 class="text-apu-purple text-left"><strong>5. PSYCHOMOTOR SKILL</strong></h6>
        <div class="table-responsive">
          <table class="table table-sm table-bordered">
            <tr class="table-light">
              <td style="font-size:12px" class="text-apu-purple"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong>5</strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong>4</strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong>3</strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong>2</strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong>1</strong></td>
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Drawing & Painting</strong></td>
              {% if early.drawing == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.drawing == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.drawing == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.drawing == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.drawing == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Handling Tools</strong></td>
              {% if early.handling == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.handling == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.handling == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.handling == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.handling == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Games</strong></td>
              {% if early.games == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.games == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.games == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.games == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.games == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Verbal Fluency</strong></td>
              {% if early.verbal == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.verbal == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.verbal == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.verbal == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.verbal == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Handwriting</strong></td>
              {% if early.handwriting == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.handwriting == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.handwriting == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.handwriting == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.handwriting == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Music</strong></td>
              {% if early.music == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.music == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.music == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.music == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.music == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Sports</strong></td>
              {% if early.sports == '5' %}
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.sports == '4' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.sports == '3' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.sports == '2' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              {% elif early.sports == '1' %}
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong></strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong><i class="fa fa-check fa-1x"></i></strong></td>
              {% endif %}
            </tr>
          </table>
        </div>
        <div class="table-responsive">
          <table class="table table-sm table-bordered">
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Vacation</strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong>{{early.term.last}}</strong></td>
            </tr>
            <tr class="table-light">
              <td style="font-size:12px" class="text-left text-apu-purple"><strong>Resumption</strong></td>
              <td style="font-size:12px" class="text-center text-dark"><strong>{{early.term.next}}</strong></td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <div class="row comment-row">
      <div class="col-md-5">
        <strong> <p class="text-apu-purple text-left">Class Manager's Comment: <span class="text-dark"><i class="p3">Dear {{early.student.first_name}}, {{early.teacher_comment}}</i></span> </p></strong>
      </div>
      {% if early.student.classe.teacher.gender == "FEMALE" %}
      <div class="col-md-2">
        <strong> <p class="text-apu-purple text-left"><span class="text-apu-purple">Mrs {{early.student.classe.teacher.first_name}} {{early.student.classe.teacher.last_name}}</span></p></strong>
      </div>
      {% else %}
      <div class="col-md-2">
        <strong> <p class="text-apu-purple text-left"><span class="text-apu-purple">Mr {{early.student.classe.teacher.first_name}} {{early.student.classe.teacher.last_name}}</span></p></strong>
      </div>
      {% endif %}
      <div class="col-md-2">
        <strong> <p class="text-apu-purple text-right">Signature: </p></strong>
      </div>
      <div class="col-md-2">
        {% if early.student.classe.signature %}
        <p class="text-left"><img src="{{early.student.classe.signature.url}}" alt="Class Teacher's Signature" class="sig"></p>
        {% endif %}
      </div>

    </div>

    <div class="row comment-row">
      <div class="col-md-5">
        <strong> <p class="text-apu-purple text-left">Head of School's Comment: <span class="text-dark"><i class="p3">{{early.head_comment}}</i></span> </p></strong>
      </div>
      <div class="col-md-2">
        {% if early.head.gender == "FEMALE" %}
        <strong> <p class="text-apu-purple text-left"><span class="text-apu-purple">Mrs {{early.term.head.first_name}} {{early.term.head.last_name}}</span></p></strong>
        {% else %}
        <strong> <p class="text-apu-purple text-left"><span class="text-apu-purple">Mr {{early.term.head.first_name}} {{early.term.head.last_name}}</span></p></strong>
        {% endif %}
      </div>
      <div class="col-md-2">
        <strong> <p class="text-apu-purple text-right">Stamp & Signature: </p></strong>
      </div>
      <div class="col-md-2">
        {% if early.term.school %}
          <p class="text-left"><img src="{{early.term.school.url}}" alt="stamp" class="sig2"></p>
        {% endif %}
      </div>

    </div>

    <div class="row comment-row">
      <div class="col-md-5">
      </div>
      <div class="col-md-2">
      </div>
      <div class="col-md-2">
        <strong> <p class="text-apu-purple text-right">Date: </p></strong>
      </div>
      <div class="col-md-3">
        <p class="text-left text-dark"><strong>{{early.updated}}</strong></p>
      </div>

    </div>

    </div>

  </div>

  <div class="report2">
    <div id="container" style="width: 100%;">
    <canvas id="show_report_ct" data-url=""></canvas>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

    <script>

    $(function () {

      var subjects_list = {{ subjects_list|safe }}
      var subjects_total_list = {{ subjects_total_list|safe }}


      var $populationChart = $("#show_report_ct");
      $.ajax({
        url: $populationChart.data("url"),
        success: function (data) {

          var ctx = $populationChart[0].getContext("2d");

          new Chart(ctx, {
            type: 'bar',
            data: {
              labels: subjects_list,
              datasets: [{
                label: 'Score (%)',
                backgroundColor: '#822E77',
                data: subjects_total_list,
              }]
            },
            options: {
              responsive: true,
              legend: {
                position: 'top',
              },
              title: {
                display: true,
                text: "{{early.student.first_name}} {{early.student.last_name}}'s {{early.term.session}} {{early.term.term}} Term Report (highest to lowest statistics)"
              }

            }
          });

        }
      });

    });

  </script>
  </div>

  {% endfor %}


{% endblock content%}