{# Template sfc hyd   #}
<link href='https://fonts.googleapis.com/css2?family=Times New Roman:ital,wght@0,400;0,700;1,400;1,700&display=swap' rel='stylesheet'>
<style>
   .bold-text{
    font-weight: bold !important;
    }

    .footer{
        width: 90%;
        position: absolute;
        bottom: 10px;
    }

    .fontFamily {
        font-family: "Times New Roman", Times, serif;
    }

    .page {
        position: relative;
        width: 100%;
        font-weight : normal ;
        min-height: 250mm;
        color:#000 !important;
        font-family: "Times New Roman", Times, serif;
    }
    .pageBreak{
        page-break-before: always !important;
    }
    .subject-grade {
        padding-left : 50% !important;
    }
    th {
        padding: 1px;
        font:bold 16px "Times new roman" !important;
        text-align:center;
    }
    td {
        padding: 0 1px;
        font:13px "Times new roman" !important;
        line-height: 1.1;
    }
    .subject-row td,
    .subject-row td span {
        font-size: 11px !important;
        line-height: 1.05;
    }
    #head td {
        padding: 1px;
        font:14px "Times new roman" !important;
    }
    .inner-tr {
        height:6px;
    }
    .inner-tr td {
        border-top: none;
        border-bottom: none;
        padding: 0 1px;
        font-weight: bold!important;
    }
    .inner-tr-border-top td {
        border-top: 1px solid #000;
        border-bottom: none;
        padding: 1px 1px;
    }
    .caps {
        text-transform: uppercase;
        font-size: 15px;
    }
    .small {
        font-size: 15px;
    }
    .calculationtable {
        margin:8px 0 0 0;
        width:90%;
        border:1px solid #000;
        border-collapse:collapse;
    }
    .calculationtable th {
        padding:2px 5px;
        font-size: 14px;
        border:1px solid #000;
        border-collapse:collapse;
    }
    .calculationtable td {
        padding:2px 5px;
        font-size: 14px;
        border:1px solid #000;
        border-collapse:collapse;
    }
    .print-footer {
        width: 100%;
    }
    .subpage-2{
        height : 325mm;
    }
    .padded-tr{
        height: 16px;
    }
    .heading {
        font-weight: bold;
        font-size: 16px;
        text-align: center;
        letter-spacing: 2px;
        margin-top: -23px;
    }
    .bold{
        font-weight: bold;
    }
</style>
{% for student in data.studentData %}
        <div class="page pageBreak" style="border:none;">
            <div class="subpage-1">
                {% if data.changeHeadingAsOfficialTranscript %}
                    <div class="heading">
                        TRANSCRIPT
                    </div>
                {% endif %}
                <table id = "printTable" style="width:100%;"><tr><td style="width:100%;">
                    <tr>
                        <td>
                            <table id="head" style="width: 100%;" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td width='60%'>
                                        <div style="display: inline-block; width: 33%; vertical-align: top">
                                            <span class="caps"><b>PROGRAM: </b></span>
                                        </div>
                                        <div style="display: inline-block; width: 65%; vertical-align: top; padding-left: 4px">
                                            <span class="bold">{{student.programName | raw}}</span>
                                        </div>
                                    </td>
                                    <td width='40%' style='text-align: left;'>
                                        <div style="display: inline-block; width: 40%; vertical-align: top">&nbsp;
                                            <span class=""><b>ROLL NO: </b></span>
                                        </div>
                                        <div style="display: inline-block; width: 58%; vertical-align: top">
                                            <span class="bold"> {{student.rollNo}}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td width='60%'>
                                        <div style="display: inline-block; width: 33%; vertical-align: top">
                                            <span class="caps"><b>MONTH AND YEAR: </b></span>
                                        </div>
                                        <div style="display: inline-block; width: 65%; vertical-align: top; padding-left: 4px">
                                            <span class="bold">{{student.examMonthYear}}</span>
                                        </div>
                                    </td>
                                    <td width='40%' style='text-align: left;'>
                                        <div style="display: inline-block; width: 40%; vertical-align: top">&nbsp;
                                            <span class=""><b>NAME: </b></span>
                                        </div>
                                        <div style="display: inline-block; width: 58%; vertical-align: top">
                                            <span class="bold">{{student.name}}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td width='60%'>
                                        <div style="display: inline-block; width: 33%; vertical-align: top">
                                            <span class="caps"><b>DATE: </b></span>
                                        </div>
                                        <div style="display: inline-block; width: 65%; vertical-align: top; padding-left: 4px">
                                            <span class="bold">{{data.dateOfIssue}}</span>
                                        </div>
                                    </td>
                                    <td width='40%' style='text-align: left;'>
                                        <div style="display: inline-block; width: 40%; vertical-align: top">&nbsp;
                                            <span class=""><b>FATHER'S NAME: </b></span>
                                        </div>
                                        <div style="display: inline-block; width: 58%; vertical-align: top">
                                            <span class="bold">{{student.fatherName}}</span>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td width='60%'>
                                        <div style="display: inline-block; width: 33%; vertical-align: top">
                                            <span class="caps"><b>MEDIUM: </b></span>
                                        </div>
                                        <div style="display: inline-block; width: 65%; vertical-align: top; padding-left: 4px">
                                            <span class="bold">ENGLISH</span>
                                        </div>
                                    </td>
                                    <td width='40%' style='text-align: left;'>
                                        <div style="display: inline-block; width: 40%; vertical-align: top">&nbsp;
                                            <span class=""><b>MOTHER'S NAME: </b></span>
                                        </div>
                                        <div style="display: inline-block; width: 58%; vertical-align: top">
                                            <span class="bold">{{student.motherName}}</span>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <table border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;width: 100%;height:100%;border:2px solid #000; margin-top:30px">
                                <col width="10%">
                                <col width="40%">
                                <col width="7%">
                                <col width="7%">
                                <col width="7%">
                                <col width="7%">
                                <col width="7%">
                                <col width="7%">
                                <tr>
                                    <th style="text-align:center;" rowspan="2"> 
                                        <svg width='5mm' height='25mm'>
                                            <text transform='rotate(180)' y='-50%' x='-50%' style='writing-mode: tb;text-anchor: middle;'>COURSE</text>
                                        </svg>
                                        <svg width='5mm' height='25mm'>
                                            <text transform='rotate(180)' y='-50%' x='-50%' style='writing-mode: tb;text-anchor: middle;'>CATEGORY</text>
                                        </svg></th>
                                    <th style="text-align:center;" rowspan="2">Course Title </th>
                                    <th  style="text-align:center;" colspan="3"><div>THEORY</div> </th>
                                    <th  style="text-align:center;" colspan="3"><div>PRACTICAL</div> </th> 
                                </tr>
                                <tr>
                                    <th width='3%'>
                                        <svg width='5mm' height='25mm'>
                                            <text transform='rotate(180)' y='-50%' x='-50%' style='writing-mode: tb;text-anchor: middle;'>CREDITS</text>
                                        </svg>
                                    </th>
                                    <th width='3%'>
                                        <svg width='5mm' height='25mm'>
                                            <text transform='rotate(180)' y='-50%' x='-50%' style='writing-mode: tb;text-anchor: middle;'>LETTER</text>
                                        </svg>
                                         <svg width='5mm' height='25mm'>
                                            <text transform='rotate(180)' y='-50%' x='-50%' style='writing-mode: tb;text-anchor: middle;'>GRADE</text>
                                        </svg>
                                    </th>
                                    <th>
                                        <svg width='5mm' height='25mm'>
                                            <text transform='rotate(180)' y='-50%' x='-50%' style='writing-mode: tb;text-anchor: middle;'>MONTH &</text>
                                        </svg>
                                        <svg width='5mm' height='25mm'>
                                            <text transform='rotate(180)' y='-50%' x='-50%' style='writing-mode: tb;text-anchor: middle;'>YEAR OF</text>
                                        </svg>
                                        <svg width='5mm' height='25mm'>
                                            <text transform='rotate(180)' y='-50%' x='-50%' style='writing-mode: tb;text-anchor: middle;'>PASSING</text>
                                        </svg>
                                    </th>
                                    <th width='3%'>
                                        <svg width='5mm' height='25mm'>
                                            <text transform='rotate(180)' y='-50%' x='-50%' style='writing-mode: tb;text-anchor: middle;'>CREDITS</text>
                                        </svg>
                                    </th>
                                    <th width='3%'>
                                        <svg width='5mm' height='25mm'>
                                            <text transform='rotate(180)' y='-50%' x='-50%' style='writing-mode: tb;text-anchor: middle;'>LETTER</text>
                                        </svg>
                                         <svg width='5mm' height='25mm'>
                                            <text transform='rotate(180)' y='-50%' x='-50%' style='writing-mode: tb;text-anchor: middle;'>GRADE</text>
                                        </svg>
                                    </th>
                                    <th>
                                        <svg width='5mm' height='25mm'>
                                            <text transform='rotate(180)' y='-50%' x='-50%' style='writing-mode: tb;text-anchor: middle;'>MONTH &</text>
                                        </svg>
                                        <svg width='5mm' height='25mm'>
                                            <text transform='rotate(180)' y='-50%' x='-50%' style='writing-mode: tb;text-anchor: middle;'>YEAR OF</text>
                                        </svg>
                                        <svg width='5mm' height='25mm'>
                                            <text transform='rotate(180)' y='-50%' x='-50%' style='writing-mode: tb;text-anchor: middle;'>PASSING</text>
                                        </svg>
                                    </th>
                                </tr>
                                {% for term in student.academicTerms %}
                                    <tr class="inner-tr">
                                        <td colspan="1"></td>
                                        <td colspan="1"><b style="text-align:left;font-size: 15px;padding: 5px;">SEMESTER -
                                                {{term.romanNumber}}</b></td>
                                        <td colspan="1"></td>
                                        <td colspan="1"></td>
                                        <td colspan="1"></td>
                                        <td colspan="1"></td>
                                        <td colspan="1"></td>
                                        <td colspan="1"></td>
                                    </tr>
                                    {% for subject in term.subjects %}
                                    <tr class="inner-tr bold subject-row">
                                        <td style="text-align:center;" valign='top'>
                                            <span style='font-size: 14px;text-transform: uppercase;'>{{subject.courseTypeDecription
                                                |raw}}</span>
                                        </td>
                                        <td style="text-align:left;padding:1px 3px;" valign='top'>
                                            <span style='font-size: 14px;text-transform: uppercase;'>{{subject.name |raw}}</span>
                                        </td>
                                        {% if subject.classType == 'THEORY'%}
                                            <td style="text-align:center; " valign='top'>
                                                <span style='font-size: 14px;'>{{subject.markDetails.credit}}</span>
                                            </td>
                                            <td valign='top'>
                                                <span class="subject-grade" style='font-size: 14px;'>{{ subject.grade }}</span>
                                            </td>
                                            <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                <span style='font-size: 14px;'>{{subject.examMonthYear}}</span>
                                            </td>
                                            <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                <span style='font-size: 14px;'>-</span>
                                            </td>
                                            <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                <span style='font-size: 14px;'>-</span>
                                            </td>
                                            <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                <span style='font-size: 14px;'>-</span>
                                            </td>
                                        {% else%}
                                            <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                <span style='font-size: 14px;'>-</span>
                                            </td>
                                            <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                <span style='font-size: 14px;'>-</span>
                                            </td>
                                            <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                <span style='font-size: 14px;'>-</span>
                                            </td>
                                            <td style="text-align:center; " valign='top'>
                                                <span style='font-size: 14px;'>{{subject.markDetails.credit}}</span>
                                            </td>
                                            <td valign='top'>
                                                <span class="subject-grade" style='font-size: 14px;'>{{ subject.grade }}</span>
                                            </td>
                                            <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                <span style='font-size: 14px;'>{{subject.examMonthYear}}</span>
                                            </td>
                                        {% endif%}
                                    </tr>
                                    {% endfor %}
                                    
                                    <tr>
                                        <td colspan="7" style='width: 1%;text-align: right; padding-right:10px'><b>SGPA</b></td>
                                        <td colspan="1" style='width: 1%;text-align: center;'><b>
                                            {% if term.failedStatus == 'PASSED' %}
                                                {{term.sgpa|number_format(student.roundOff, '.')}}
                                            {% else %}
                                            -
                                            {% endif %}
                                        <b></td>
                                    </tr>
                                    {% endfor %}
                                    {% if student.auditCources|length > 0 %}
                                        <tr class="inner-tr">
                                            <td colspan="1"></td>
                                            <td colspan="1"><b style="text-align:left;font-size: 15px;padding: 5px;">NON-CGPA COURSES</b></td>
                                            <td colspan="1"></td>
                                            <td colspan="1"></td>
                                            <td colspan="1"></td>
                                            <td colspan="1"></td>
                                            <td colspan="1"></td>
                                            <td colspan="1"></td>
                                        </tr>
                                    {% endif %}
                                    {% for subject in student.auditCources %}
                                        <tr class="inner-tr subject-row">
                                            <td style="text-align:center;" valign='top'>
                                                <span style='font-size: 14px;text-transform: uppercase;'>{{subject.courseTypeDecription
                                                    |raw}}</span>
                                            </td>
                                            <td style="text-align:left;padding:1px 3px;" valign='top'>
                                                <span style='font-size: 14px;text-transform: uppercase;'>{{subject.name |raw}}</span>
                                            </td>
                                            {% if subject.classType == 'THEORY'%}
                                                <td style="text-align:center; " valign='top'>
                                                    <span style='font-size: 14px;'>{{subject.markDetails.credit}}</span>
                                                </td>
                                                <td valign='top'>
                                                    <span class="subject-grade" style='font-size: 14px;'>{{ subject.grade }}</span>
                                                </td>
                                                <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                    <span style='font-size: 14px;'>{{subject.examMonthYear}}</span>
                                                </td>
                                                <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                    <span style='font-size: 14px;'>-</span>
                                                </td>
                                                <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                    <span style='font-size: 14px;'>-</span>
                                                </td>
                                                <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                    <span style='font-size: 14px;'>-</span>
                                                </td>
                                            {% else%}
                                                <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                    <span style='font-size: 14px;'>-</span>
                                                </td>
                                                <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                    <span style='font-size: 14px;'>-</span>
                                                </td>
                                                <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                    <span style='font-size: 14px;'>-</span>
                                                </td>
                                                <td style="text-align:center; " valign='top'>
                                                    <span style='font-size: 14px;'>{{subject.markDetails.credit}}</span>
                                                </td>
                                                <td valign='top'>
                                                    <span class="subject-grade" style='font-size: 14px;'>{{ subject.grade }}</span>
                                                </td>
                                                <td style="text-align:center; white-space:nowrap;" valign='top'>
                                                    <span style='font-size: 14px;'>{{subject.examMonthYear}}</span>
                                                </td>
                                            {% endif%}
                                        </tr>
                                    {% endfor %}
                                </table>
                                {% set addOnSlNo = 0 %}
                                {% if student.addOnCources|length > 0 %}
                                    <div style="text-align:left;  margin-top:5px; padding-left:10px"><b>ADD-ON COURSES</b></div>
                                    <table border="1" cellspacing="0" cellpadding="0" style="border-collapse:collapse;width: 100%;height:100%;border:2px solid #000;">
                                        <col width="11%">
                                        <col width="70%">
                                        <col width="19%">
                                        <tr>
                                            <th style="text-align:center;">S.NO.</th>
                                            <th style="text-align:center;">COURSE TITLE</th>
                                            <th style="text-align:center;">CREDITS</th>
                                        </tr>
                                        {% for subject in student.addOnCources %}
                                            {% set addOnSlNo = addOnSlNo+1 %}
                                            <tr class="inner-tr subject-row ">
                                                <td style="text-align:center;" valign='top'>
                                                    <span style='font-size: 14px;text-transform: uppercase;'>{{addOnSlNo}}</span>
                                                </td>
                                                <td style="text-align:left;padding:1px 3px;" valign='top'>
                                                    <span style='font-size: 14px;text-transform: uppercase;'>{{subject.name |raw}}</span>
                                                </td>
                                                <td style="text-align:center; " valign='top'>
                                                    <span style='font-size: 14px;'>{{subject.markDetails.credit}}</span>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </table>
                                {% endif %}
                            </td>
                        </tr>
                    </table>
                </div>
                <div style="width:100%; margin-top:5px;font-size: 13px!important;">
                    <div style="width:70%; float:left; padding-left:20px">
                        <div style="width:55%; float:left; text-align:left">
                            <b>CGPA (CUMULATIVE GRADE POINT AVERAGE) :&nbsp;</b>
                        </div>
                        <div style="width:45%; float:left; text-align:left">
                            {% if student.failedStatus == 'PASSED' %}
                            {{student.cgpa|number_format(student.roundOff, '.')}} 
                            {% else %}
                            -
                            {% endif %}
                        </div>
                    </div>
                    <div style="width:30%; float:left;">
                        <b>RESULT:&nbsp;</b> {{student.failedStatus == 'PASSED' ? 'PASS' : 'FAIL'}}
                    </div>
                </div>
                <div style="width:100%; margin-top:10px;font-size: 13px!important;">
                    <div style="width:70%; float:left; padding-left:20px">
                        <div style="width:55%; float:left; text-align:left">
                            <b>CONVERSION FACTOR (CF) :&nbsp;</b>
                        </div>
                        <div style="width:45%; float:left; text-align:left">
                            {% if student.failedStatus == 'PASSED' %}
                            {{student.conversionFactor}} 
                            {% else %}
                            -
                            {% endif %}
                        </div>
                    </div>
                    <div style="width:30%; float:left;">
                        <b>GRADE:&nbsp;&nbsp;</b> {{student.grade}}
                    </div>
                </div>
                <div style="width:100%; margin-top:10px;font-size: 13px!important;">
                    <div style="width:70%; float:left; padding-left:20px">
                        <div style="width:55%; float:left; text-align:left">
                            <b>PERCENTAGE OF MARKS = (CGPA + CF) X 10 :&nbsp;</b>
                        </div>
                        <div style="width:45%; float:left; text-align:left">
                            {% if student.failedStatus == 'PASSED' %}
                            {{((student.cgpa + student.conversionFactor) * 10)|number_format(student.roundOff, '.')}}
                            {% else %}
                            -
                            {% endif %}
                        </div>
                    </div>
                    <div style="width:30%; float:left;">
                    </div>
                </div>
        </div>
    </div> 
{% endfor %}