<style>
     .rankListReport { font-family: 'Times New Roman', Times, serif; padding: 0 5mm; box-sizing: border-box; }
     .rankListReport table { table-layout: fixed; width: 100%; }
     .rankListReport table, .rankListReport th, .rankListReport td { border: 1px solid #000; border-collapse: collapse; }
     .rankListReport td, .rankListReport th { padding: 5px; }
     .rankListReport .no-border, .rankListReport .no-border td { border: 0 !important; }
</style>
    <div class="page rankListReport" style="width:100%;">
    {# 'Exclude Grace Mark Students' drops the after grace columns and the grace mark column #}
    {% set showGraceMarkColumns = not additionalDetails.excludeGraceMarkStudents %}
    {% set trcolSpan = showGraceMarkColumns ? 11 : 7 %}
    {% if additionalDetails.collegeData.collegeHeader %}
    <div class=" mt-2 mb-3 printOnlyDisplayData" style="text-align:center;padding:10px!important;">
        <img src="{{ additionalDetails.collegeData.collegeHeader }}" alt="College Header" style="width:100%; max-height:130px; object-fit:contain;">
    </div>
    {% else %}
    <div class=" mt-2 mb-3 printOnlyDisplayData" style='font-size: 24px; line-height:15px;text-align:center;padding:10px!important;'><b>{{additionalDetails.collageName}}</b></div>
    {% endif %}
    <div class=" mt-2 mb-3 printOnlyDisplayData" style='font-size: 20px; line-height:15px;text-align:center;padding:5px!important;'><b><u>RANK LIST</u></b></div>
    <div class=" mt-2 mb-3 printOnlyDisplayData" style='font-size: 17px; line-height:15px;text-align:center;padding:5px!important;'><b>Batch Year : {{additionalDetails.batchName}}</b></div>
    <div class=" mt-2 mb-3 printOnlyDisplayData" style='font-size: 17px; line-height:15px;text-align:center;padding:5px!important;'><b>{{additionalDetails.patternCourseName}}</b></div>

    <table class=" mb-4 table table-responsive-md border" role="grid">
        {# widths total 100% either way - the mark columns hold values like 208.29 and need the room #}
        <colgroup>
            <col style="{{ showGraceMarkColumns ? 'width:4%'  : 'width:5%'  }}">  {# Sl No. #}
            <col style="{{ showGraceMarkColumns ? 'width:4%'  : 'width:5%'  }}">  {# Rank #}
            <col style="{{ showGraceMarkColumns ? 'width:9%'  : 'width:11%' }}">  {# Reg. No #}
            <col style="{{ showGraceMarkColumns ? 'width:36%' : 'width:50%' }}">  {# Name of Student #}
            {% if showGraceMarkColumns %}
            <col style="width:7%">   {# CCPA After Grace #}
            <col style="width:6%">   {# Grade After Grace #}
            <col style="width:7.5%"> {# Total Marks After Grace #}
            {% endif %}
            <col style="{{ showGraceMarkColumns ? 'width:7%'   : 'width:9%'  }}"> {# CCPA Before Grace #}
            <col style="{{ showGraceMarkColumns ? 'width:6%'   : 'width:9%'  }}"> {# Grade Before Grace #}
            <col style="{{ showGraceMarkColumns ? 'width:7.5%' : 'width:11%' }}"> {# Total Marks Before Grace #}
            {% if showGraceMarkColumns %}
            <col style="width:6%">   {# Grace Mark #}
            {% endif %}
        </colgroup>
        <thead>
            <tr class="no-border">
                <td class="removeTdBorder college-head no-border" style="text-align:center;padding:10px!important; display:none;" data-f-bold='true' data-a-h='center' colspan="{{trcolSpan}}" >
                <div style='font-size: 24px; line-height:15px;'><b> {{additionalDetails.collageName}}</b></div></td>
            </tr>
            <tr class="no-border">
                <td class="removeTdBorder college-head no-border" style="text-align:center;padding:10px!important; display:none;" data-f-bold='true' data-a-h='center' colspan="{{trcolSpan}}" >
                <div style='font-size: 20px; line-height:15px;'><b>RANK LIST</b></div></td>
            </tr>
            <tr class="no-border">
                <td class="removeTdBorder college-head no-border" style="text-align:center;padding:10px!important; display:none;" data-f-bold='true' data-a-h='center' colspan="{{trcolSpan}}" >
                <div style='font-size: 17px; line-height:15px;'><b>Batch Year : {{additionalDetails.batchName}}</b></div></td>
            </tr>
            <tr class="no-border">
                <td class="removeTdBorder college-head no-border" style="text-align:center;padding:10px!important; display:none;" data-f-bold='true' data-a-h='center' colspan="{{trcolSpan}}" >
                <div style='font-size: 17px; line-height:15px;'><b>{{additionalDetails.patternCourseName}}</b></div></td>
            </tr>
            <tr></tr>
            <tr class="border">
                <th class='text-center bold' data-a-h='center' data-a-v='middle'>Sl No.</th>
                <th class='text-center bold' data-a-h='center' data-a-v='middle'>Rank</th>
                <th class='text-center bold' data-a-h='center' data-a-v='middle'>Reg. No</th>
                <th class='text-center bold' data-a-h='center' data-a-v='middle'>Name of Student</th>
                {% if showGraceMarkColumns %}
                <th class='text-center bold' data-a-h='center' data-a-v='middle'>CCPA </br>After</br> Grace</th>
                <th class='text-center bold' data-a-h='center' data-a-v='middle'>Grade</br> After</br> Grace</th>
                <th class='text-center bold' data-a-h='center' data-a-v='middle'>Total </br>Marks </br>After </br>Grace</th>
                {% endif %}
                {# with the after grace columns gone there is nothing to contrast against, so drop the 'Before Grace' qualifier #}
                <th class='text-center bold' data-a-h='center' data-a-v='middle'>{% if showGraceMarkColumns %}CCPA </br>Before </br>Grace{% else %}CCPA{% endif %}</th>
                <th class='text-center bold' data-a-h='center' data-a-v='middle'>{% if showGraceMarkColumns %}Grade </br>Before </br>Grace{% else %}Grade{% endif %}</th>
                <th class='text-center bold' data-a-h='center' data-a-v='middle'>{% if showGraceMarkColumns %}Total </br>Marks</br> Before </br>Grace{% else %}Total </br>Marks{% endif %}</th>
                {% if showGraceMarkColumns %}
                <th class='text-center bold' data-a-h='center' data-a-v='middle'>Grace </br>Mark</th>
                {% endif %}
            </tr>
        </thead>
        <tbody>
        {% set slno = 0 %}
        {% set rank = 0 %}
        {% set prevCgpa = null %}
        {% for student in students %}
        {% set slno = slno + 1 %}
        {#
           Dense ranking, as V3 did it: an equal CGPA shares a rank and the next
           distinct value is rank + 1 (9.10, 8.50, 8.50, 8.20 -> 1, 2, 2, 3), rather
           than competition ranking which would skip to 4.
           loop.first forces the first row to rank 1 whatever its CGPA - without it a
           student sitting on 0.00 could compare equal to the initial prevCgpa and
           print rank 0.
           rankCgpa is set in applyWithoutGraceMarkCgpa to whichever CGPA the list was
           sorted by, so the tie test can never drift from the sort order.
        #}
        {% if loop.first or student.rankCgpa != prevCgpa %}{% set rank = rank + 1 %}{% endif %}
        {% set prevCgpa = student.rankCgpa %}
            <tr>
                <td class="align-middle text-center">{{slno}}</td>
                <td class="align-middle text-center">{{rank}}</td>
                <td class="align-middle text-center">{{student.regNo}}</td>
                <td class="align-middle">{{student.studentName}}</td>
                {% if showGraceMarkColumns %}
                <td class="align-middle text-center">{{student.cgpa}}</td>
                <td class="align-middle text-center">{{student.grade}}</td>
                <td class="align-middle text-center">{{student.markObtained}}</td>
                {% endif %}
                <td class="align-middle text-center">{{student.cgpaWithoutGracemark}}</td>
                <td class="align-middle text-center">{{student.gradeWithoutGracemark}}</td>
                <td class="align-middle text-center">{{student.markObtainedWithoutGracemark}}</td>
                {% if showGraceMarkColumns %}
                {# round before testing - the subtraction of two floats can land on 4.999999 rather than 5 #}
                {% set graceMark = student.markObtained is empty ? null : (student.markObtained - student.markObtainedWithoutGracemark)|round(2) %}
                <td class="align-middle text-center">{{ graceMark ? graceMark : '-' }}</td>
                {% endif %}
            </tr>
        {% endfor %}
        </tbody>

    </table>
    <div class="mt-4 printOnlyDisplayData" style="text-align:right; font-size:17px;"><b>Controller of Examinations</b></div>

</div>
