<style id="print-style">
    html, body {
        margin: 0;
        padding: 0;
        font-family: "Times New Roman", "Liberation Serif", "DejaVu Serif", Times, serif !important;
    }

    .certificate-page,
    .certificate-page * {
        font-family: "Times New Roman", "Liberation Serif", "DejaVu Serif", Times, serif !important;
    }

    .certificate-page {
        width: 100%;
        margin: 0;
        padding: 0 40px;
        box-sizing: border-box;
        page-break-after: always;
        color: #000;
    }

    .certificate-date {
        width: 100%;
        text-align: right;
        font-size: 24px;
        margin-bottom: 30px;
    }

    .certificate-title {
        width: 100%;
        text-align: center;
        font-size: 26px;
        font-weight: bold;
        margin: 30px 0 50px 0;
        letter-spacing: 0.5px;
    }

    .certificate-body {
        width: 100%;
        font-size: 24px;
        line-height: 2;
        text-align: justify;
        text-indent: 40px;
    }

    .certificate-signatures{
        width: 100%;
        margin-top: 280px;
        font-size: 24px;
        font-weight: bold;
    }

    .certificate-signatures table {
        width: 90%;
        margin: 0 auto;
        border-collapse: collapse;
    }

    .certificate-signatures td {
        padding: 0;
    }

    .certificate-sign-left {
        text-align: left;
    }

    .certificate-sign-right {
        text-align: right;
        padding-right: 30px;
    }
</style>

{% for student in data.studentData %}
    <div class='certificate-page'>
        {% if data.collegeData.collegeHeader %}
            <div style='margin-top:15px; text-align:center; margin-bottom:40px;'>
                <img style="width:auto; height:115px;" src="{{ data.collegeData.collegeHeader }}">
            </div>
        {% else %}
            <div style='height:115px;'></div>
        {% endif %}

        <div class='certificate-date'>
            Date: {{ data.additionalInfo.currentDate }}
        </div>

        <div class='certificate-title'>
            COURSE COMPLETION CERTIFICATE
        </div>

        <div class='certificate-body'>
            Certified that {{ student.genderTag }}. {{ student.name|raw|upper }} (Reg.No. {{ student.regNo }}) was a regular student of this college in the {{ student.programmeLine }} programme during {{ student.admissionYear }} - {{ student.endYear }} and {{ student.pronoun }} has
            {%- if student.isPassed %}
                successfully completed the programme in {{ student.lastMonthYear|replace({' - ': ' '}) }} with CGPA {{ student.cgpa }} out of 10 (CGPA in percentage: {{ student.cgpaPercentage }}%) with {{ student.grade }} grade .
            {%- else %}
                completed the programme in {{ student.lastMonthYear|replace({' - ': ' '}) }} .
            {%- endif %}
        </div>

        <div class='certificate-signatures'>
            <table>
                <tr>
                    <td class='certificate-sign-left' style="font-weight: bold;">CONTROLLER OF EXAMINATIONS</td>
                    <td class='certificate-sign-right' style="font-weight: bold;">PRINCIPAL</td>
                </tr>
            </table>
        </div>
    </div>
{% endfor %}
