<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Annual Report — {{studentName}}</title>
    <style>
        @page { margin: 18mm 14mm 16mm 14mm; }
        * { box-sizing: border-box; }
        body { font-family: DejaVu Sans, Arial, sans-serif; color: #111; font-size: 10px; }

        .school-header { text-align: center; padding-bottom: 10px; border-bottom: 2px solid {{brandPrimary}}; }
        .school-header h1 { margin: 0; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; }
        .school-header .motto { font-style: italic; font-size: 10px; color: #555; margin-top: 2px; }
        .school-header .meta { font-size: 9px; color: #444; margin-top: 4px; }
        .school-header .logo { max-height: 55px; margin-bottom: 4px; }

        h2.doc-title { text-align: center; font-size: 13px; margin: 12px 0 4px 0; text-transform: uppercase; letter-spacing: 2px; }

        .student-grid { width: 100%; margin: 8px 0 12px 0; border-collapse: collapse; }
        .student-grid td { padding: 4px 6px; border: 1px solid #ddd; font-size: 10px; }
        .student-grid .label { background: #f5f5f5; font-weight: bold; color: #333; width: 16%; }

        .grades-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
        .grades-table th, .grades-table td { border: 1px solid #ccc; padding: 5px 6px; font-size: 9px; }
        .grades-table th { background: {{brandPrimary}}; color: #fff; border-bottom: 2px solid {{brandSecondary}}; text-transform: uppercase; font-size: 8px; letter-spacing: 0.5px; }
        .grades-table td.num, .grades-table th.num { text-align: center; }
        .grades-table tr:nth-child(even) { background: #fafafa; }

        .term-summary { width: 100%; border-collapse: collapse; margin-top: 8px; }
        .term-summary td, .term-summary th { border: 1px solid #ddd; padding: 4px 6px; font-size: 9px; text-align: center; }
        .term-summary th { background: #f5f5f5; text-transform: uppercase; font-size: 8px; }

        .summary-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
        .summary-table td { width: 20%; text-align: center; padding: 8px; border: 1px solid #ddd; }
        .summary-table td .v { display: block; font-size: 14px; font-weight: bold; color: #111; margin-bottom: 2px; }
        .summary-table td .l { display: block; font-size: 9px; text-transform: uppercase; color: #666; letter-spacing: 0.5px; }

        .promotion { text-align: center; margin: 10px 0; }
        .promotion .badge { display: inline-block; padding: 4px 18px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; font-size: 12px; border: 2px solid #16a34a; color: #16a34a; }
        .promotion .badge.repeat { border-color: #dc2626; color: #dc2626; }
        .promotion .badge.pending { border-color: #d97706; color: #d97706; }

        .key { margin-top: 12px; }
        .key h3 { font-size: 10px; margin: 0 0 4px 0; text-transform: uppercase; letter-spacing: 1px; }
        .key table { width: 100%; border-collapse: collapse; }
        .key td { border: 1px solid #ddd; padding: 3px 6px; font-size: 8px; text-align: center; }

        .comment { border-left: 3px solid #111; padding: 6px 10px; margin-top: 8px; background: #fafafa; font-size: 10px; }
        .comment .who { font-size: 9px; text-transform: uppercase; color: #666; margin-bottom: 2px; letter-spacing: 0.5px; }

        .footer { margin-top: 16px; font-size: 9px; color: #777; border-top: 1px solid #ddd; padding-top: 6px; display: flex; justify-content: space-between; }
    </style>
</head>
<body>

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

<div class="school-header">
    {{#logoPath}}<img src="{{logoPath}}" class="logo" alt="logo">{{/logoPath}}
    <h1>{{schoolName}}</h1>
    {{#schoolMotto}}<div class="motto">{{schoolMotto}}</div>{{/schoolMotto}}
    <div class="meta">{{schoolMetaLine}}</div>
</div>

<h2 class="doc-title">{{sessionTitle}}</h2>

<table class="student-grid">
    <tr>
        <td class="label">Student</td><td>{{studentName}}</td>
        <td class="label">Reg No.</td><td>{{regNo}}</td>
    </tr>
    <tr>
        <td class="label">Class</td><td>{{className}}</td>
        <td class="label">Position</td><td>{{positionOr}}</td>
    </tr>
</table>

<table class="grades-table">
    <thead>
    <tr>
        <th>Subject</th>
        {{#termHeaders}}<th class="num">{{name}}</th>{{/termHeaders}}
        <th class="num">Total</th>
        <th class="num">Average</th>
        <th class="num">Grade</th>
        <th>Remark</th>
    </tr>
    </thead>
    <tbody>
    {{#subjects}}
        <tr>
            <td>{{name}}</td>
            {{#terms}}<td class="num">{{score}}</td>{{/terms}}
            <td class="num">{{annualTotal}}</td>
            <td class="num"><strong>{{annualAverage}}</strong></td>
            <td class="num">{{grade}}</td>
            <td>{{remark}}</td>
        </tr>
    {{/subjects}}
    {{^subjects}}
        <tr><td colspan="9" style="text-align:center; padding:12px; color:#999;">No results recorded for this session.</td></tr>
    {{/subjects}}
    </tbody>
</table>

{{#hasTermSummaries}}
<table class="term-summary">
    <tr><th>Term</th>{{#termSummaries}}<th>{{name}}</th>{{/termSummaries}}</tr>
    <tr><td><strong>Average</strong></td>{{#termSummaries}}<td>{{average}}%</td>{{/termSummaries}}</tr>
    <tr><td><strong>Position</strong></td>{{#termSummaries}}<td>{{position}}</td>{{/termSummaries}}</tr>
</table>
{{/hasTermSummaries}}

<table class="summary-table">
    <tr>
        <td><span class="v">{{noOfSubjects}}</span><span class="l">Subjects</span></td>
        <td><span class="v">{{cumulativeAverage}}%</span><span class="l">Cumulative Avg</span></td>
        <td><span class="v">{{cumulativeGpa}}</span><span class="l">CGPA</span></td>
        <td><span class="v">{{positionOr}}</span><span class="l">Position</span></td>
        <td><span class="v">{{promotionStatus}}</span><span class="l">Status</span></td>
    </tr>
</table>

<div class="promotion">
    <span class="badge {{promotionClass}}">{{promotionStatus}}</span>
</div>

{{#hasGradeKey}}
<div class="key">
    <h3>Grading Key</h3>
    <table>
        <tr>{{#gradeKey}}<td><strong>{{letter}}</strong> {{range}}<br>{{remark}}</td>{{/gradeKey}}</tr>
    </table>
</div>
{{/hasGradeKey}}

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

{{#signaturePath}}
<table style="width:100%; margin-top:18px;">
    <tr>
        <td style="text-align:center; width:60%;">
            <img src="{{signaturePath}}" style="max-height:40px;"><br>
            <span style="font-size:9px; color:#555;">{{headTeacherName}}{{^headTeacherName}}Head Teacher{{/headTeacherName}} — Signature</span>
        </td>
        {{#stampPath}}<td style="text-align:center;"><img src="{{stampPath}}" style="max-height:60px;"></td>{{/stampPath}}
    </tr>
</table>
{{/signaturePath}}

<div class="footer">
    <span>Printed: {{printDate}}</span>
    {{#nextTerm}}<span>Next session resumes: {{nextTerm}}</span>{{/nextTerm}}
</div>

</body>
</html>
