<style>
    /* border:none (not white) so the collapsed edge is zero-width and the header row below
       keeps its own top border; a white 1px border would win the collapse and erase it. */
    #convocation-report .removeTdBorder {
        border: none !important;
    }
    #convocation-report {
        font-size: 13px;
        border: none;
    }
</style>
{# Batch-wise convocation list. One table so the UI's export/print (#convocation-report) keeps working. #}
<div class="page" style="width:100%;">
    <table class=" mb-4 table table-responsive-md table-bordered  border" role="grid" id="convocation-report">
        <tbody>
        {% for batch in batchList %}
            <tr>
                <td class="removeTdBorder" colspan="9" style="text-align:center;padding:10px!important;" data-f-bold='true' data-a-h='center'>
                    <div style='font-size: 18px; line-height:20px;'><b>{{additionalDetails.collegeData.collegeName}}</b></div>
                </td>
            </tr>
            <tr>
                <td class="removeTdBorder" colspan="9" style="text-align:center;padding:5px!important;" data-f-bold='true' data-a-h='center'>
                    <div style='font-size: 16px; line-height:20px;'><b>{{additionalDetails.collegeData.place}}</b></div>
                </td>
            </tr>
            <tr>
                <td class="removeTdBorder" colspan="9" style="text-align:center;padding:5px!important;" data-f-bold='true' data-a-h='center'>
                    <div style='font-size: 16px; line-height:20px;'><b>CONVOCATION LIST FOR {{batch.startYear}} BATCH OF {{batch.programName}}</b></div>
                </td>
            </tr>
            <tr class="border">
                <th class='text-center' data-a-h='center' data-a-v='middle' style="width:5%; padding: 10px;">Sl No</th>
                <th class='text-center' data-a-h='center' data-a-v='middle' style="width:12%; padding: 10px;">Reg No</th>
                <th class='text-center' data-a-h='center' data-a-v='middle' style="width:22%; padding: 10px;">Name</th>
                <th class='text-center' data-a-h='center' data-a-v='middle' style="width:14%; padding: 10px;">Elective</th>
                <th class='text-center' data-a-h='center' data-a-v='middle' style="width:13%; padding: 10px;">Month/Year Of Passing</th>
                <th class='text-center' data-a-h='center' data-a-v='middle' style="width:8%; padding: 10px;">Overall %</th>
                <th class='text-center' data-a-h='center' data-a-v='middle' style="width:8%; padding: 10px;">CGPA</th>
                <th class='text-center' data-a-h='center' data-a-v='middle' style="width:6%; padding: 10px;">Grade</th>
                <th class='text-center' data-a-h='center' data-a-v='middle' style="width:12%; padding: 10px;">Class</th>
            </tr>
            {% for student in batch.students %}
                <tr>
                    <td class="align-middle text-center" style="padding: 5px 5px;">{{loop.index}}</td>
                    <td class="align-middle text-center" style="padding: 5px 5px;">{{student.registerNumber}}</td>
                    <td class="align-middle" style="padding: 5px 5px; text-align:left !important;">{{student.studentName}}</td>
                    <td class="align-middle" style="padding: 5px 5px; text-align:left !important;">{{student.specialisation}}</td>
                    <td class="align-middle text-center" style="padding: 5px 5px;">{{student.monthYearOfPassing}}</td>
                    <td class="align-middle text-center" style="padding: 5px 5px;">{{student.percentage}}</td>
                    <td class="align-middle text-center" style="padding: 5px 5px;">{{student.cgpa}}</td>
                    <td class="align-middle text-center" style="padding: 5px 5px;">{{student.grade}}</td>
                    <td class="align-middle" style="padding: 5px 5px; text-align:left !important;">{{student.class}}</td>
                </tr>
            {% endfor %}
        {% endfor %}
        </tbody>
    </table>
</div>
