{# Term-wise backlog certificate template #}
<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>
    body {
        font-family: "Times New Roman", Times, serif;
        color: #000;
    }
    .certificate-page {
        width: 100%;
        font-family: "Times New Roman", Times, serif;
        font-size: 18px;
        line-height: 1.8;
    }
    .college-header {
        width: 100%;
        max-height: 120px;
        object-fit: contain;
    }
    .fallback-header {
        width: 100%;
        text-align: center;
        line-height: 1.2;
    }
    .fallback-logo {
        width: 80px;
        height: auto;
        vertical-align: middle;
    }
    .fallback-title {
        font-size: 22px;
        font-weight: bold;
        text-transform: uppercase;
    }
    .certificate-line {
        border-top: 1px solid #eee;
        margin-top: 18px;
        margin-bottom: 8px;
    }
    .date-row {
        text-align: right;
        margin-bottom: 24px;
    }
    .certificate-title {
        text-align: center;
        font-size: 21px;
        font-weight: bold;
        text-decoration: underline;
        margin-bottom: 22px;
    }
    .certificate-body {
        text-align: justify;
        text-indent: 52px;
        margin-bottom: 24px;
    }
    .backlog-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 12px;
        margin-bottom: 22px;
    }
    .backlog-table th,
    .backlog-table td {
        border: 1px solid #555;
        padding: 6px 8px;
        font-size: 16px;
        line-height: 1.3;
        text-align: center;
        vertical-align: middle;
    }
    .backlog-table th {
        font-weight: bold;
    }
    .note-section {
        font-style: italic;
        line-height: 1.25;
        margin-left: 14px;
        margin-top: 18px;
    }
    .signature-row {
        width: 100%;
        margin-top: 94px;
        font-weight: bold;
        letter-spacing: 0;
    }
    .signature-left {
        float: left;
        width: 45%;
        text-align: left;
    }
    .signature-right {
        float: right;
        width: 45%;
        text-align: right;
    }
    .bold {
        font-weight: bold;
    }
</style>

{% set degreeName = data.studentDetails.degreeDescription ? data.studentDetails.degreeDescription : data.studentDetails.degreeName %}
{% set programmeName = data.studentDetails.programName ? data.studentDetails.programName : data.studentDetails.deptName %}

<div class="certificate-page">
    {% if data.collegeData.collegeHeader and data.collegeData.isHeaderEnabled %}
        <div style="text-align:center;">
            <img class="college-header" src="{{data.collegeData.collegeHeader}}">
        </div>
    {% else %}
        <table class="fallback-header" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td style="width: 18%; text-align:right; padding-right:12px;">
                    <img class="fallback-logo" src="{{data.collegeData.collageLogo}}">
                </td>
                <td style="width: 82%; text-align:left;">
                    <div class="fallback-title">{{data.collegeData.collegeName}}</div>
                    {% if data.collegeData.collegeAddress3 %}
                        <div>{{data.collegeData.collegeAddress3}}</div>
                    {% endif %}
                    {% if data.collegeData.universityName %}
                        <div>Affiliated to {{data.collegeData.universityName}}</div>
                    {% endif %}
                </td>
            </tr>
        </table>
    {% endif %}

    <div class="certificate-line"></div>
    <div class="date-row">Date: {{data.dateOfIssue}}</div>

    <div class="certificate-title">BACKLOG CERTIFICATE</div>

    <div class="certificate-body">
        This is to certify that <span class="bold">{{data.studentDetails.courtesyTitle}} {{data.studentDetails.name}}</span>
        (Reg. No. <span class="bold">{{data.studentDetails.regNo}}</span>) was a bonafide student of
        {{data.collegeData.collegeName}}, having studied in the
        <span class="bold">{{degreeName}}{% if programmeName %} ({{programmeName}}){% endif %}</span>
        programme during {{data.studentDetails.startYear}}-{{data.studentDetails.lastExamYear}}.
        {{data.studentDetails.personalPronoun}} has successfully completed the programme in
        {{data.studentDetails.lastExamMonth|upper}} {{data.studentDetails.lastExamYear}}.
        {{data.studentDetails.possessivePronoun}} backlog report is as follows.
    </div>

    <table class="backlog-table">
        <tr>
            <th style="width:12%;">Semester</th>
            <th style="width:22%;">Expected year of<br>Passing</th>
            <th style="width:18%;">Year of<br>Passing</th>
            <th style="width:36%;">No of Attempts<br>(Improvement (I)/ Supplementary (S))</th>
            <th style="width:12%;">Remarks</th>
        </tr>
        {% for term in data.termWiseBacklogs %}
            <tr>
                <td>{{term.semesterName}}</td>
                <td>{{term.expectedYearOfPassing}}</td>
                <td>{{term.yearOfPassing}}</td>
                <td>{{term.attemptsDisplay}}</td>
                <td>{{term.remarks}}</td>
            </tr>
        {% endfor %}
    </table>

    <div class="note-section">
        <div>{{data.studentDetails.backlogSummaryText}}</div>
        <div>The backlog certificate is issued on the request given by the student for the purpose of further studies.</div>
    </div>

    <div class="signature-row">
        <div class="signature-left">CONTROLLER OF EXAMINATIONS</div>
        <div class="signature-right">PRINCIPAL</div>
    </div>
</div>