<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Report Card — {{studentName}}</title>
    <style>
        @page { margin: 12mm 10mm 12mm 10mm; }
        * { box-sizing: border-box; }
        body { font-family: DejaVu Sans, Arial, sans-serif; color: #1a1a1a; font-size: 10px; line-height: 1.35; }

        table { border-collapse: collapse; width: 100%; }
        .frame { border: 1px solid #cfcfcf; }

        /* Header */
        .header td { vertical-align: middle; padding: 4px; }
        .header .logo { max-height: 70px; max-width: 80px; }
        .header .identity { text-align: center; }
        .header .identity h1 { margin: 0; font-size: 18px; color: {{brandPrimary}}; letter-spacing: 0.5px; }
        .header .identity .addr { font-size: 9px; color: #333; margin-top: 2px; }
        .header .identity .motto { font-style: italic; font-size: 9px; color: #555; margin-top: 2px; }

        /* Term banner */
        .banner { background: {{brandPrimary}}; color: #fff; text-align: center; font-weight: bold;
                  text-transform: uppercase; letter-spacing: 1px; font-size: 12px; padding: 5px; margin: 6px 0; }

        /* Student / summary grid */
        .info td { border: 1px solid #cfcfcf; padding: 4px 6px; font-size: 9.5px; }
        .info .label { background: #f3f4f6; font-weight: bold; color: #333; white-space: nowrap; width: 1%; }

        /* Body two-column */
        .body { margin-top: 6px; }
        .body > tbody > tr > td { vertical-align: top; }
        .body .grades-col { width: 73%; padding-right: 6px; }
        .body .skills-col { width: 27%; }

        .grades th, .grades td { border: 1px solid #cfcfcf; padding: 3px 4px; font-size: 9px; }
        .grades th { background: {{brandPrimary}}; color: #fff; text-transform: uppercase; font-size: 7.5px; letter-spacing: 0.3px; }
        .grades td.num, .grades th.num { text-align: center; }
        .grades tr:nth-child(even) td { background: #fafafa; }
        .grades td.subj { text-align: left; }

        .panel { border: 1px solid #cfcfcf; margin-bottom: 6px; }
        .panel h3 { margin: 0; background: {{brandPrimary}}; color: #fff; font-size: 8.5px; text-transform: uppercase;
                    letter-spacing: 0.3px; padding: 3px 5px; }
        .panel table td { padding: 2px 5px; font-size: 9px; border-bottom: 1px solid #eee; }
        .panel table td.rate { text-align: right; font-weight: bold; width: 22px; color: {{brandPrimary}}; }

        /* Legend + attendance */
        .lower { margin-top: 6px; }
        .lower > tbody > tr > td { vertical-align: top; }
        .lower .key-col { width: 70%; padding-right: 6px; }
        .lower .att-col { width: 30%; }
        .keytable td { border: 1px solid #cfcfcf; padding: 3px 4px; text-align: center; font-size: 8px; }
        .keytable .kletter { font-weight: bold; font-size: 11px; color: {{brandPrimary}}; }
        .att td { border: 1px solid #cfcfcf; padding: 3px 6px; font-size: 9px; }
        .att .label { background: #f3f4f6; }
        .att .head { background: {{brandPrimary}}; color: #fff; text-transform: uppercase; font-size: 8.5px;
                     letter-spacing: 0.3px; text-align: center; font-weight: bold; }

        /* Comments */
        .comment { border-left: 3px solid {{brandPrimary}}; background: #fafafa; padding: 4px 8px; margin-top: 6px; font-size: 9.5px; }
        .comment .who { font-size: 8px; text-transform: uppercase; color: #666; letter-spacing: 0.4px; margin-bottom: 1px; }

        .sign td { padding-top: 16px; font-size: 9px; color: #444; vertical-align: bottom; }
        .sign .sig-img { max-height: 40px; }
        .sign .stamp-img { max-height: 60px; }

        .footer { margin-top: 10px; border-top: 1px solid #ddd; padding-top: 4px; font-size: 8px; color: #777; }
        .footer td.r { text-align: right; }
        .nextterm { margin-top: 6px; font-size: 9.5px; }
        .nextterm strong { color: {{brandPrimary}}; }
    </style>
</head>
<body>

{{#studentPhotoPath}}<img src="{{studentPhotoPath}}" style="position:absolute; top:12mm; right:10mm; width:56px; height:68px; object-fit:cover; border:1px solid #ccc;" alt="photo">{{/studentPhotoPath}}

<table class="header">
    <tr>
        <td style="width:80px;">{{#logoPath}}<img src="{{logoPath}}" class="logo" alt="logo">{{/logoPath}}</td>
        <td class="identity">
            <h1>{{schoolName}}</h1>
            <div class="addr">{{schoolMetaLine}}</div>
            {{#schoolMotto}}<div class="motto">Motto: {{schoolMotto}}</div>{{/schoolMotto}}
        </td>
        <td style="width:80px;"></td>
    </tr>
</table>

<div class="banner">{{termTitleOr}}</div>

<table class="info">
    <tr>
        <td class="label">Name</td><td>{{studentName}}</td>
        <td class="label">Performance Grade</td><td>{{performanceGradeLabel}}</td>
    </tr>
    <tr>
        <td class="label">Reg. No.</td><td>{{regNo}}</td>
        <td class="label">No. of Subjects</td><td>{{noOfSubjects}}</td>
    </tr>
    <tr>
        <td class="label">Class</td><td>{{className}}</td>
        <td class="label">Total Score</td><td>{{totalScore}}</td>
    </tr>
    <tr>
        <td class="label">Email</td><td>{{studentEmail}}</td>
        <td class="label">Average</td><td>{{studentAverage}}%</td>
    </tr>
    <tr>
        <td class="label">Position</td><td>{{positionOr}}</td>
        <td class="label">Result Summary</td><td>{{resultSummary}}</td>
    </tr>
</table>

<table class="body">
    <tr>
        <td class="grades-col">
            <table class="grades">
                <thead>
                <tr>
                    <th class="subj">Subject</th>
                    {{#hasComponents}}{{#componentLabels}}<th class="num">{{.}}</th>{{/componentLabels}}{{/hasComponents}}
                    {{^hasComponents}}<th class="num">CA</th><th class="num">Mid-Term</th><th class="num">Exam</th>{{/hasComponents}}
                    <th class="num">Total</th>
                    <th class="num">Grade</th>
                    <th>Remark</th>
                </tr>
                </thead>
                <tbody>
                {{#subjects}}
                    <tr>
                        <td class="subj">{{name}}</td>
                        {{#hasComponents}}{{#components}}<td class="num">{{scoreFmt}}</td>{{/components}}{{/hasComponents}}
                        {{^hasComponents}}<td class="num">{{caFmt}}</td><td class="num">{{midTermFmt}}</td><td class="num">{{examFmt}}</td>{{/hasComponents}}
                        <td class="num"><strong style="color:{{totalColor}}">{{totalFmt}}</strong></td>
                        <td class="num" style="color:{{gradeColor}}; font-weight:bold;">{{gradeOr}}</td>
                        <td>{{remark}}</td>
                    </tr>
                {{/subjects}}
                {{^subjects}}
                    <tr><td colspan="7" style="text-align:center; padding:10px; color:#999;">No grades recorded for this term.</td></tr>
                {{/subjects}}
                </tbody>
            </table>
        </td>
        <td class="skills-col">
            {{#hasAffective}}
                <div class="panel">
                    <h3>Affective Skills (1–5)</h3>
                    <table>
                        {{#affectiveSkills}}
                            <tr><td>{{name}}</td><td class="rate">{{rating}}</td></tr>
                        {{/affectiveSkills}}
                    </table>
                </div>
            {{/hasAffective}}
            {{#hasPsychomotor}}
                <div class="panel">
                    <h3>Psychomotor Skills (1–5)</h3>
                    <table>
                        {{#psychomotorSkills}}
                            <tr><td>{{name}}</td><td class="rate">{{rating}}</td></tr>
                        {{/psychomotorSkills}}
                    </table>
                </div>
            {{/hasPsychomotor}}
        </td>
    </tr>
</table>

<table class="lower">
    <tr>
        <td class="key-col">
            <table class="keytable">
                <tr>
                    {{#gradeKey}}
                        <td>
                            <span class="kletter">{{letter}}</span><br>
                            {{range}}<br>
                            {{remark}}<br>
                            {{point}} pts
                        </td>
                    {{/gradeKey}}
                </tr>
            </table>
        </td>
        {{#hasAttendance}}
            <td class="att-col">
                <table class="att">
                    <tr><td class="head" colspan="2">Attendance Report</td></tr>
                    <tr><td class="label">School Days</td><td>{{schoolDays}}</td></tr>
                    <tr><td class="label">Days Present</td><td>{{daysPresent}}</td></tr>
                    <tr><td class="label">Days Absent</td><td>{{daysAbsent}}</td></tr>
                    <tr><td class="label">Days Excused</td><td>{{daysExcused}}</td></tr>
                    <tr><td class="label">% Attendance</td><td>{{attendancePercentFmt}}</td></tr>
                </table>
            </td>
        {{/hasAttendance}}
    </tr>
</table>

{{#formTeacherComment}}
    <div class="comment">
        <div class="who">Form Teacher's Comment</div>
        {{formTeacherComment}}
    </div>
{{/formTeacherComment}}
{{#headTeacherComment}}
    <div class="comment">
        <div class="who">{{headTeacherLabel}}</div>
        {{headTeacherComment}}
    </div>
{{/headTeacherComment}}

<table class="sign">
    <tr>
        <td style="width:60%;">
            {{#signaturePath}}<img src="{{signaturePath}}" class="sig-img"><br>{{/signaturePath}}
            <span>{{headTeacherName}}{{^headTeacherName}}Head Teacher{{/headTeacherName}} — Head Teacher's Signature</span>
        </td>
        <td style="text-align:right;">{{#stampPath}}<img src="{{stampPath}}" class="stamp-img">{{/stampPath}}</td>
    </tr>
</table>

{{#nextTerm}}<div class="nextterm">Next Term Begins: <strong>{{nextTerm}}</strong></div>{{/nextTerm}}

<table class="footer">
    <tr>
        <td>Printed: {{printDate}}</td>
        <td class="r">{{schoolName}}</td>
    </tr>
</table>

</body>
</html>
