
<style>
    .table tbody tr td, .table tbody tr th { padding: 5px; vertical-align:middle ;}
    .removeTdBorder {
        border: 1px solid #fff !important;
    }
    .removeTdBorder2 {
        border-left: 1px solid #fff !important;
        border-right: 1px solid #fff !important;
    }
</style>
<div class="page" style="width:100%;">
    {% set photoColumnCount = additionalDetails.enableStudentProfileImageInTopRankReport ? 1 : 0 %}
    {% set groupColumnCount = additionalDetails.enableGroupNameInTopRankReport ? 1 : 0 %}
    {% set scoreColumnCount = additionalDetails.category == 'SGPA' ? 1 : 2 %}
    {% set trcolSpan = 3 + photoColumnCount + groupColumnCount + additionalDetails.academicTerms|length + scoreColumnCount + 1 %}
    {% set semCount = additionalDetails.academicTerms|length %}
    
    <table class=" mb-4 table table-bordered border-black" role="grid" id="print-top-rank-list" data-cols-width="5,20,55,20,10">
        <tbody>
            <tr class="">
                <td class="removeTdBorder college-head " style="text-align:center;padding:10px!important;" data-f-bold='true' data-a-h='center' colspan="{{trcolSpan}}" >
                <div style='font-size: 24px; line-height:15px;'><b> {{additionalDetails.collegeData.collegeName  |raw |upper}}</b></div></td>
            </tr>
            <tr class="">
                <td class="removeTdBorder college-head " style="text-align:center;padding:10px!important;" data-f-bold='true' data-a-h='center' colspan="{{trcolSpan}}" >
                <div style='font-size: 20px; line-height:15px;'><b> (Affiliated to Bengaluru City University)  </b></div></td>
            </tr>
            <tr class="">
                <td class="removeTdBorder college-head " style="text-align:center;padding:10px!important;" 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>
        {% for syllabus in syllabusDetails %}
            {% set slNo = 0 %}
            <tr>
                <th class="removeTdBorder2" style="text-align:center; {{loop.first ?  'border-top: 1px solid #fff !important;': ''}} " data-f-bold='true' data-a-h='center' colspan="{{trcolSpan}}">
                </th>
            </tr>
            <tr class="border">
                <th class='text-center bold' data-a-h='center' data-a-v='middle' width = "4%">Sl.No.</th>
                <th class='text-center bold' data-a-h='center' data-a-v='middle' width = "10%" >Reg. No.</th>
                <th class='text-center bold' data-a-h='center' data-a-v='middle' width = "25%">Name</th>
                {% if additionalDetails.enableStudentProfileImageInTopRankReport %}
                    <th class='text-center bold' data-a-h='center' data-a-v='middle' width = "10%">Photo</th>
                {% endif %}
                {% if additionalDetails.enableGroupNameInTopRankReport %}
                <th class='text-center bold' data-a-h='center' data-a-v='middle' width = "12%">Batch</th>
                {% endif %}
                {% for academicTerm in additionalDetails.academicTerms %}
                    <th class='text-center bold' data-a-h='center' data-a-v='middle' width = "10%">{{ academicTerm.termDisplayName }} Sem</th>
                {% endfor %}
                {% if additionalDetails.category == 'SGPA' %}
                    <th class='text-center bold' data-a-h='center' data-a-v='middle' width = "10%">Total</th>
                {% else %}
                    <th class='text-center bold' data-a-h='center' data-a-v='middle' width = "10%">Max. Marks</th>
                    <th class='text-center bold' data-a-h='center' data-a-v='middle' width = "10%">Total Mark Obtained</th>
                {% endif %}
                <th class='text-center bold' data-a-h='center' data-a-v='middle' width = "10%">{{ additionalDetails.enableAvgInTopRankReport ? 'Avg' : 'Percentage' }}</th>
            </tr>
            {% for student in syllabus.passedStudents %}
                {% set slNo = slNo + 1 %}
                <tr class="text-center">
                    <td class="align-middle text-center" data-a-h='center' data-a-v='middle'>{{ slNo }}</td>
                    <td class="align-middle text-center" data-a-h='center' data-a-v='middle'>{{ student.regNo }}</td>
                    <td class="align-middle text-left" >{{ student.name }}</td>
                    {% if additionalDetails.enableStudentProfileImageInTopRankReport %}
                        <td>
                            <img src="{{student.studentImage}}"  alt='Student Image' style='width:20mm; height:23mm'>
                        </td>
                    {% endif %}
                    {% if additionalDetails.enableGroupNameInTopRankReport %}
                    <td class="align-middle text-center" data-a-h='center' data-a-v='middle'>{{ student.groupName }}</td>
                    {% endif %}
                    
                    {% for currentAcademicTerm in additionalDetails.academicTerms %}
                        {% set termDetails = student.term[currentAcademicTerm.academicTermId] %}
                        {% if termDetails %}
                            {% if additionalDetails.category == 'SGPA' %}
                                <td class="align-middle text-center" data-a-h='center' data-a-v='middle'>{{termDetails.semesterSgpa}}</td>
                            {% else %}
                                <td class="align-middle text-center" data-a-h='center' data-a-v='middle'>{{termDetails.totalObtainedMark}}</td>
                            {% endif %}
                        {% else %}
                            <td class="align-middle text-center" data-a-h='center' data-a-v='middle'>-</td>
                        {% endif %}
                    {% endfor %}
                    {% if additionalDetails.category == 'SGPA' %}
                        <td class="align-middle text-center" data-a-h='center' data-a-v='middle'>{{student.totalSgpa}}</td>
                    {% else %}
                        <td class="align-middle text-center" data-a-h='center' data-a-v='middle'>{{student.subjectTotalMarks}}</td>
                        <td class="align-middle text-center" data-a-h='center' data-a-v='middle'>{{student.totalObtainedMark}}</td>
                    {% endif %}
                    {% if additionalDetails.enableAvgInTopRankReport %}
                        {% if semCount > 0 %}
                            <td class="align-middle text-center" data-a-h='center' data-a-v='middle'>
                                {{ additionalDetails.category == 'SGPA' ? (student.totalSgpa / semCount)|round(2) : (student.totalObtainedMark / semCount)|round(2) }}
                            </td>
                        {% else %}
                            <td class="align-middle text-center" data-a-h='center' data-a-v='middle'>-</td>
                        {% endif %}
                    {% else %}
                        <td class="align-middle text-center" data-a-h='center' data-a-v='middle'>{{student.percentage}}</td>
                    {% endif %}
                </tr>
            {% endfor %}
        {% endfor %}
        </tbody>
    </table>

</div>
