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

        .school-header { text-align: center; padding-bottom: 12px; border-bottom: 2px solid {{brandPrimary}}; }
        .school-header h1 { margin: 0; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; }
        .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: 14px; margin: 16px 0 10px 0; text-transform: uppercase; letter-spacing: 2px; }

        .meta-grid { width: 100%; margin: 0 0 14px 0; border-collapse: collapse; }
        .meta-grid td { padding: 5px 8px; border: 1px solid #ddd; font-size: 10px; }
        .meta-grid .label { background: #f5f5f5; font-weight: bold; color: #333; width: 28%; }

        .score-banner { text-align: center; margin: 14px 0; padding: 14px; border: 1px solid #ddd; border-radius: 6px; }
        .score-banner .pct { font-size: 34px; font-weight: bold; }
        .score-banner .sub { font-size: 11px; color: #555; }
        .verdict { display: inline-block; padding: 3px 14px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; margin-top: 6px; }
        .pass { color: #16a34a; border: 2px solid #16a34a; }
        .fail { color: #dc2626; border: 2px solid #dc2626; }

        table.items { width: 100%; border-collapse: collapse; margin-top: 6px; }
        table.items th, table.items td { border: 1px solid #ccc; padding: 6px 8px; font-size: 10px; }
        table.items th { background: {{brandPrimary}}; color: #fff; border-bottom: 2px solid {{brandSecondary}}; text-transform: uppercase; font-size: 9px; letter-spacing: 0.5px; }
        table.items td.num, table.items th.num { text-align: right; font-variant-numeric: tabular-nums; }
        .tag-correct { color: #16a34a; font-weight: bold; }
        .tag-incorrect { color: #dc2626; font-weight: bold; }
        .tag-pending { color: #d97706; font-weight: bold; }

        .footer { margin-top: 22px; font-size: 9px; color: #777; border-top: 1px solid #ddd; padding-top: 6px; text-align: center; }
    </style>
</head>
<body>

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

<h2 class="doc-title">Examination Result Slip</h2>

<table class="meta-grid">
    <tr><td class="label">Candidate</td><td>{{takerName}}</td><td class="label">Exam</td><td>{{testTitle}}</td></tr>
    <tr>
        <td class="label">Submitted</td><td>{{submittedAtFmt}}</td>
        <td class="label">Time spent</td><td>{{timeSpentFmt}}</td>
    </tr>
</table>

<div class="score-banner">
    <div class="pct">{{percentageFmt}}%</div>
    <div class="sub">{{totalScoreFmt}} / {{maxScore}} marks {{#gradeLetter}}· Grade {{gradeLetter}} {{/gradeLetter}}· Pass mark {{passMark}}%</div>
    <div>
        {{#isGrading}}
            <span class="verdict tag-pending">Awaiting Grading</span>
        {{/isGrading}}
        {{^isGrading}}
            <span class="verdict {{verdictClass}}">{{verdictText}}</span>
        {{/isGrading}}
    </div>
</div>

<table class="items">
    <thead>
        <tr><th style="width:6%">#</th><th>Question</th><th class="num" style="width:14%">Marks</th><th style="width:16%">Result</th></tr>
    </thead>
    <tbody>
        {{#items}}
            <tr>
                <td>{{n}}</td>
                <td>{{questionShort}}</td>
                <td class="num">{{marksFmt}}</td>
                <td class="{{stateClass}}">{{stateLabel}}</td>
            </tr>
        {{/items}}
    </tbody>
</table>

<div class="footer">
    This is a computer-generated result slip from {{schoolName}}. Generated {{generatedAt}}.
</div>

</body>
</html>
