
<link href='https://fonts.googleapis.com/css2?family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap' rel='stylesheet'>
<style id="print-style" scoped>
    .txt{
        font-size: 22px !important;
        font-family: 'Liberation Serif', 'Book Antiqua', 'Tinos', Times, serif !important;
    }
    .decorative{
        font-family: 'Algerian', 'Times New Roman', 'Liberation Serif', Times, serif !important;
        font-weight: bold;
        font-style: italic;
        font-stretch: extra-condensed;
    }
    .sign-row{
        width: 100%;
        border-collapse: collapse;
    }
    .sign-row td{
        width: 50%;
        text-align: center;
        border: none;
        padding-top:60px; 
    }
    @media screen {
        .page-a4 {
            width: 21cm !important;
            margin: auto;
        }
    }
    .cert-dept-name-input, .cert-hod-name-input {
        border-bottom: 1px solid #000 !important;
    }
    .page-a4 {
        width: 100%;
        border: none;
        page-break-before: always;
        position: relative;
        min-height: 27.5cm;
        color: #000;
    }
</style>
{% for student in data.studentData %}
    <div class="page-a4">
        <div class='txt' style="text-align:center; page-break-after:always;">
            <div style="padding-top:70mm;">
                <div style="font-size:38px; font-weight:bold; text-decoration:underline; letter-spacing:2px;">CERTIFICATE</div>
                <div style="padding-top:26px;font-size:22px;">This is to certify that</div>
                <div style="padding-top:26px; font-size:24px; font-style:italic; font-weight:bold;">{{ (student.studentGender|lower starts with 'f') ? 'Ms.' : 'Mr.' }} {{ student.studentName|upper }}</div>
                <div style="padding-top:26px;font-size:22px;">has successfully completed</div>
                <div style="padding-top:26px;font-size:22px;">the PG Certificate Programme</div>
                <div style="padding-top:26px;font-size:22px;">Organized by the</div>
                <div style="padding-top:26px;font-size:22px;">
                    <input type="text" class="cert-dept-name-input" value="{{ student.deptName }}" oninput="var v=this.value; document.querySelectorAll('.cert-dept-name-input').forEach(function(el){ el.value = v; });" style="text-align:center; font-family:inherit; font-size:inherit; font-weight:bold; border:none; min-width:720px;" />
                </div>
                <div style="padding-top:26px;font-size:22px;">on</div>
                <div class="decorative" style="padding-top:22px; font-size:24px;">{{ student.subjectDesc|upper }}</div>
                <div style="padding-top:26px;font-size:22px;">securing <b>'{{ student.grade.letterGrade }}' Grade</b></div>
                <div style="padding-top:26px;font-size:22px;">with {{ student.overallPercent|round(2) }}% of marks.</div>
            </div>

            <table class="sign-row" style="font-weight:bold;">
                <tr>
                    <td>
                        <input type="text" class="cert-hod-name-input" value="{{ student.hodName }}" oninput="var v=this.value; document.querySelectorAll('.cert-hod-name-input').forEach(function(el){ el.value = v; });" style="text-align:center; font-family:inherit; font-size:20px; font-weight:bold; border:none; min-width:320px;" /><br/>
                        <span style="font-size:17px;">Head of the Department</span>
                    </td>
                    <td>
                        <span style="font-size:20px;">{{ data.collegeAndOtherData.examControllerName }}</span><br/>
                        <span style="font-size:17px;">Controller of Examinations</span>
                    </td>
                </tr>
            </table>

            <div style="padding-top:35px; font-weight:bold;">
                <span style="font-size:21px;">{{ data.collegeAndOtherData.principalName|default('Dr. Martin K A') }}</span><br/>
                <span style="font-size:18px;">Principal</span>
            </div>

            <table class="sign-row" style="padding-top:70px; font-size:22px;">
                <tr>
                    <td>{{ data.displayContentOptions.markListDate|default('now')|date('d-m-Y') }}</td>
                    <td>Seal</td>
                </tr>
            </table>
        </div>
    </div>
{% endfor %}
