{# Template For UG Students - SEMESTER GRADE REPORT
Changes : Show rotated headers, semester grade and SGPA #}
<link href='https://fonts.googleapis.com/css2?family=Arial:wght@400;700&display=swap' rel='stylesheet'>
<style>
    body, table {
        font-family: Times New Roman !important;
    }
	table {
        border-collapse: collapse;
    }
	.markdisplay {
        border: 2px solid black !important;
        width: 100%;
    }
	.markdisplay th, .markdisplay td {
        border: 1px solid black;
        text-align: center;
        vertical-align: middle;
    }
    .info-table {
        width: 100%;
        margin-bottom: 20px;
        font-size: 14px;
        line-height: 1.8;
    }
    .info-table td {
        border: none !important;
        padding: 2px 0;
        vertical-align: top;
        font-size: 14px;
    }
    .info-table table {
        border-collapse: collapse;
        border: none;
    }
    .info-table table td {
        border: none !important;
        padding: 0 !important;
        vertical-align: top !important;
        font-size: 14px;
    }
    .info-label {
        font-weight: bold;
        min-width: 155px;
        text-align: left;
        vertical-align: top;
        font-size: 14px;
    }
    .info-value {
        text-align: left;
        vertical-align: top;
        word-wrap: break-word;
        white-space: normal;
        font-size: 14px;
        max-width: 300px;
    }
    .info-right-col {
        padding-left: 230px;
    }

	.heading {
        font-weight: bold;
        font-size: 16px;
        text-align: center;
        margin: 40px 0;
        letter-spacing: 2px;
    }
	.footer-class {
        font-size: 14px;
        text-align: center;
        margin-top: 200px !important;
    }
	.rotate-text {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 1.2;
        text-align: center;
        display: inline-block;
    }
    .course-code-col {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        white-space: normal;
        font-weight: bold;
        font-size: 14px;
        line-height: 1.2;
        text-align: center;
        display: inline-block;
    }
    .markdisplay thead th {
        text-align: center !important;
        vertical-align: middle !important;
    }
    @media print {
        * {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
        }
        .rotate-text, .course-code-col {
            writing-mode: vertical-rl !important;
            -webkit-writing-mode: vertical-rl !important;
            -ms-writing-mode: tb-rl !important;
            transform: rotate(180deg) !important;
            -webkit-transform: rotate(180deg) !important;
            -moz-transform: rotate(180deg) !important;
            -ms-transform: rotate(180deg) !important;
            white-space: normal !important;
            text-align: center !important;
            display: inline-block !important;
        }
        .markdisplay thead th div {
            writing-mode: vertical-rl !important;
            -webkit-writing-mode: vertical-rl !important;
        }
    }
    .subject-row td {
        padding: 6px 4px;
        font-size: 14px;
        height: 30px;
    }
    .subject-name {
        text-align: left !important;
        padding-left: 8px !important;
        font-size: 14px;
    }
    .total-row {
        font-weight: bold;
    }
    .sgpa-section {
        margin-top: 28px;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.5;
    }
    .result-section {
        margin-block: 20px;
        font-size: 14px;
        font-weight: bold;
        line-height: 1.5;
    }
    .no-border-table tr td{
        border: none !important;
    }
    .single-page {
        position: relative;
        width: 100%;
        min-height: 297mm;
        page-break-after: always;
        padding: 15px 25px;
        box-sizing: border-box;
    }
    @media print {
        .single-page {
            padding: 15px 25px;
        }
        @page {
            margin: 0;
            size: A4;
        }
    }
</style>
{% for student in data.studentData %}
    <div class="single-page">
        {# Header Title #}
        <div style='min-height:200mm'> 
            <div class="heading">SEMESTER GRADE REPORT
                {% if data.displayContentOptions.changeHeadingAsTranscript %}
                    <br> TRANSCRIPT
                {% endif %}
            </div>
            {# Student Information Section #}
            <table class="info-table no-border-table" cellpadding="0" cellspacing="0" style="width: 100%; border:none">
                <tr>
                    <td style="width: 45%; vertical-align: top;">
                        <table cellpadding="0" cellspacing="0" style="width: 100%; border: none;">
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">EXAMINATION</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{data.examRegistrationData.groupDesc}}</td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">SEMESTER</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{data.examRegistrationData.semInRomanLetter}}</td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">MONTH AND YEAR</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{data.examRegistrationData.examMonthName | upper}} {{data.examRegistrationData.examYear}}</td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">DATE</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{ data.displayContentOptions.markListDate }}</td>
                            </tr>
                        </table>
                    </td>
                    <td style="width: 55%; vertical-align: top; padding-left: 50px;">
                        <table cellpadding="0" cellspacing="0" style="width: 100%; border: none;">
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">ROLL NO</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{student.rollNo}}</td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">NAME</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{student.name | upper}}</td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">FATHER'S NAME</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{student.fatherName | upper}}</td>
                            </tr>
                            <tr style="line-height: 30px;">
                                <td class="info-label" style="width: 155px; border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">MOTHER'S NAME</td>
                                <td class="info-value" style="border: none; padding: 2px 0; vertical-align: top; font-size: 14px; font-weight: bold;">: {{student.motherName | upper}}</td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>

            {# Marks Table #}
            {% if student.isResultBlocked %}
                <div style="color:red; padding-top:1cm; text-align:center; font-weight:bold;">
                    {{student.blockingMsg |raw}}
                </div>
            {% else %}
                <table class="markdisplay" cellpadding="0" cellspacing="0" style="margin-top: 15px;">
                    <thead>
                        <tr style="height: 110px;">
                            <th style="width: 35px; vertical-align: middle;">
                                <div class="course-code-col" style="writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important;">COURSE<br>CATEGORY</div>
                            </th>
                            <th style="width: 380px; vertical-align: middle;">
                                <div style="padding: 8px; font-weight: bold; font-size:14px; width: 380px;">COURSE TITLE</div>
                            </th>
                            <th style="width: 35px;">
                                <div class="rotate-text" style="writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; style="font-size:14px">CREDITS</div>
                            </th>
                            <th style="width: 35px;">
                                <div class="rotate-text" style="writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; style="font-size:14px">LETTER<br>GRADE</div>
                            </th>
                            <th style="width: 35px;">
                                <div class="rotate-text" style="writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; style="font-size:14px">GRADE<br>POINTS</div>
                            </th>
                            <th style="width: 35px;">
                                <div class="rotate-text" style="writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; style="font-size:14px">CREDITS<br>ACQUIRED</div>
                            </th>
                            <th style="width: 35px;">
                                <div class="rotate-text" style="writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; style="font-size:14px">CREDIT<br>POINTS</div>
                            </th>
                            <th style="width: 35px;">
                                <div class="rotate-text" style="writing-mode: vertical-rl !important; -webkit-writing-mode: vertical-rl !important; transform: rotate(180deg) !important; -webkit-transform: rotate(180deg) !important; style="font-size:14px">RESULT</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        {% set totalCredits = 0 %}
                        {% set totalCreditPoints = 0 %}
                        {% set failedCountInNonCreditCourse = 0 %}
                        {% set failedCountInOtherSubjects = 0 %}
                        {% for subject in student.subjects %}
                            {% set grade = subject.grade %}
                            {% if data.displayContentOptions.showGradAsAbsent and subject.attendanceStatus == "ABSENT" %}
                                {% set grade = "AB" %}
                            {% endif %}

                            {% if subject.excludeSubjectFromTotal and subject.failedStatus == "FAILED" %}
                                {% set failedCountInNonCreditCourse = failedCountInNonCreditCourse + 1 %}
                            {% elseif subject.failedStatus == "FAILED" %}
                                {% set failedCountInOtherSubjects = failedCountInOtherSubjects + 1 %}
                            {% endif %}

                            <tr class="subject-row">
                                <td style="text-align:center; font-weight: bold; font-size: 14px; border-top: none; border-bottom: none;">{{subject.subjectTypeCode |raw}}</td>
                                <td class="subject-name" style="font-size: 14px; border-top: none; border-bottom: none;">{{subject.name |raw}} {{ subject.excludeSubjectFromTotal == "1" ? '*' : '' }}</td>
                                <td style="font-size: 14px; border-top: none; border-bottom: none;">{{subject.credit}}</td>
                                <td style="font-size: 14px; border-top: none; border-bottom: none;">
                                    {% if subject.attendanceStatus == "ABSENT" %}
                                        AB
                                    {% elseif subject.attendanceStatus == "MALPRACTICE" %}
                                        MAL
                                    {% else %}
                                        {{grade}}
                                    {% endif %}
                                </td>
                                <td style="font-size: 14px; border-top: none; border-bottom: none;">
                                    {% if subject.attendanceStatus == "ABSENT" %}
                                        0
                                    {% else %}
                                        {{subject.gradePoint}}
                                    {% endif %}
                                </td>
                                <td style="font-size: 14px; border-top: none; border-bottom: none;">{{subject.failedStatus == 'FAILED' ? '' : subject.credit}}</td>
                                <td style="font-size: 14px; border-top: none; border-bottom: none;">{{ (subject.failedStatus == 'FAILED' ? '0' : subject.creditGradePoint)}}</td>
                                <td style="font-size: 14px; border-top: none; border-bottom: none;">
                                    {% if subject.attendanceStatus == "ABSENT" and subject.excludeSubjectFromTotal %}
                                        F
                                    {% else %}
                                    {{subject.failedStatus == 'FAILED' ? 'F' : 'P'}}
                                    {% endif %}
                                </td>
                            </tr>
                            {% if subject.excludeSubjectFromTotal != "1" %}
                                {% if subject.failedStatus == 'FAILED' %}
                                    {# Don't add credits for failed subjects #}
                                {% else %}
                                    {% set totalCredits = totalCredits + subject.credit %}
                                    {% set totalCreditPoints = totalCreditPoints + subject.creditGradePoint %}
                                {% endif %}
                            {% endif %}
                        {% endfor %}
                        {% set totalCredits = student.earnedCredits %}
                        {% set totalCreditPoints = student.semesterTotalCreditPoints %}
                        <tr class="total-row" style="height: 35px;">
                            <td colspan="2" style="text-align:center;">Total</td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>{{totalCredits}}</td>
                            <td>{{totalCreditPoints}}</td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            {% endif %}
            {% if student.haveExcludeSubjectFromTotal %}
                <div style="margin-top: 15px; font-size: 14px;">
                    <span>*</span> Indicates subjects which are not calculated for SGPA/CGPA.
                </div>
            {% endif %}
           
            {# Result Section #}
            <div class="sgpa-section" style="margin-top: 20px;">
                SEMESTER GRADE POINT AVERAGE (SGPA) = TCP/TCA = ---
            </div>
            <div class="result-section" style="margin-top: 20px;">
            {% if student.finalSemesterStatus %}
                    RESULT : {{student.finalSemesterStatus}}
                {% elseif failedCountInOtherSubjects == 0 and  failedCountInNonCreditCourse > 0 %}
                    RESULT : PROMOTED
                {% else %}
                    RESULT : {{student.failedStatus == 'FAILED' ? 'PROMOTED' : 'PASS'}} 
            {% endif %}
            </div>
        </div>
        {# Footer with Seal and Signatures #}
        {% if not data.isStudentSideExamResult %}
            <table class="footer-class no-border-table" border="0" style="width:100%; margin-top: 200px; font-size: 14px; table-layout: fixed;">
                <tr>
                    <td style="width:33%; text-align:center; vertical-align:bottom; font-size:14px">
                        <div style="height: 80px;"></div>
                        <b>COLLEGE SEAL</b>
                    </td>
                    <td style="width:33%; text-align:center; vertical-align:bottom; font-size:14px">
                        {% if data.displayContentOptions.examControllerNameFlag == '1' %}
                            <b style="white-space: nowrap;">{{data.collegeAndOtherData.examControllerName}}</b><br/>
                        {% else %}
                            <div style="height: 20px;"></div>
                        {% endif %}
                        {% if data.displayContentOptions.examControllerLabelFlag == '1' %}
                            <b style="white-space: nowrap;">CONTROLLER OF EXAMINATION</b>
                        {% else %}
                            <div style="height: 80px;"></div>
                            <b>CONTROLLER OF EXAMINATION</b>
                        {% endif %}
                        {% if data.displayContentOptions.coeSealFlag == '1' %}
                            <br><img src="{{data.collegeAndOtherData.coeSeal}}" style="width:150px;height:70px; margin-top:8px;"/>
                        {% endif %}
                    </td>
                    <td style="width:33%; text-align:center; vertical-align:bottom; font-size:14px">
                        {% if data.displayContentOptions.principalNameFlag == '1' %}
                            <b style="white-space: nowrap;">{{data.collegeAndOtherData.principalName}}</b><br/>
                        {% else %}
                            <div style="height: 20px;"></div>
                        {% endif %}
                        {% if data.displayContentOptions.principalLabelFlag == '1' %}
                            <b style="white-space: nowrap;">PRINCIPAL</b>
                        {% else %}
                            <div style="height: 80px;"></div>
                            <b>PRINCIPAL</b>
                        {% endif %}
                        {% if data.displayContentOptions.principalSealFlag == '1' %}
                            <br><img src="{{data.collegeAndOtherData.principalSeal}}" style="width:150px;height:70px; margin-top:8px;"/>
                        {% endif %}
                    </td>
                </tr>
            </table>
        {% endif %}
    </div>
{% endfor %}