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

        .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 14px 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: 18%; }

        .session-title { font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;
            background: {{brandPrimary}}; color: #fff; border-bottom: 2px solid {{brandSecondary}}; padding: 5px 8px; margin-top: 14px; }
        .term-title { font-size: 10px; font-weight: bold; color: #333; margin: 8px 0 2px 0; text-transform: uppercase; letter-spacing: 0.5px; }

        .grades-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
        .grades-table th, .grades-table td { border: 1px solid #ccc; padding: 4px 6px; font-size: 10px; }
        .grades-table th { background: #444; color: #fff; text-transform: uppercase; font-size: 9px; letter-spacing: 0.5px; }
        .grades-table td.num, .grades-table th.num { text-align: center; }
        .grades-table tr:nth-child(even) { background: #fafafa; }
        .term-meta { font-size: 9px; color: #555; margin: 3px 0 0 0; text-align: right; }

        .summary-table { width: 100%; border-collapse: collapse; margin: 14px 0; border-top: 2px solid #111; }
        .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; }

        .empty { text-align: center; padding: 16px; color: #999; font-style: italic; }
        .footer { margin-top: 18px; font-size: 9px; color: #777; border-top: 1px solid #ddd; padding-top: 6px; }
        .footer .sign { margin-top: 24px; display: flex; justify-content: space-between; }
        .footer .sign span { border-top: 1px solid #555; padding-top: 3px; width: 40%; text-align: center; color: #555; }
    </style>
</head>
<body>

<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">Official Academic Transcript</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">Programme</td><td>{{programOr}}</td>
        <td class="label">Class</td><td>{{classNameOr}}</td>
    </tr>
    <tr>
        <td class="label">Status</td><td>{{statusLine}}</td>
        <td class="label">Transcript No.</td><td>{{transcriptNo}}</td>
    </tr>
</table>

{{^hasData}}
    <div class="empty">No academic records are available for this student.</div>
{{/hasData}}
{{#hasData}}
    {{#sessions}}
        <div class="session-title">{{sessionName}}</div>
        {{#terms}}
            <div class="term-title">{{termName}}</div>
            <table class="grades-table">
                <thead>
                <tr>
                    <th>Subject</th>
                    <th class="num">Code</th>
                    <th class="num">Total</th>
                    <th class="num">Grade</th>
                    <th class="num">Grade Pts</th>
                </tr>
                </thead>
                <tbody>
                {{#subjects}}
                    <tr>
                        <td>{{name}}</td>
                        <td class="num">{{codeOr}}</td>
                        <td class="num"><strong>{{total}}</strong></td>
                        <td class="num">{{gradeOr}}</td>
                        <td class="num">{{gradePoints}}</td>
                    </tr>
                {{/subjects}}
                {{^subjects}}
                    <tr><td colspan="5" class="empty">No grades recorded.</td></tr>
                {{/subjects}}
                </tbody>
            </table>
            <div class="term-meta">
                Subjects: {{subjectsCount}} ·
                Average: {{averageShow}} ·
                GPA: {{gpaOr}} ·
                Position: {{positionOr}}
            </div>
        {{/terms}}
    {{/sessions}}

    <table class="summary-table">
        <tr>
            <td><span class="v">{{cumulative.sessionsCount}}</span><span class="l">Sessions</span></td>
            <td><span class="v">{{cumulative.termsCompleted}}</span><span class="l">Terms</span></td>
            <td><span class="v">{{cumulative.subjectsTaken}}</span><span class="l">Subjects</span></td>
            <td><span class="v">{{cumulative.overallAverage}}%</span><span class="l">Cum. Average</span></td>
            <td><span class="v">{{cumulative.cgpa}}</span><span class="l">CGPA</span></td>
        </tr>
    </table>
{{/hasData}}

<div class="footer">
    <span>Printed: {{printDate}}</span>
    <div class="sign">
        <span>Registrar</span>
        <span>Principal</span>
    </div>
</div>

</body>
</html>
