<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Exeat Pass — {{studentName}}</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 .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: 14px; margin: 16px 0 6px 0; text-transform: uppercase; letter-spacing: 3px; }
        .reference { text-align: center; font-family: monospace; color: #555; font-size: 11px; margin-bottom: 16px; }

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

        .status-banner { text-align: center; margin: 16px 0; }
        .status-banner .badge { display: inline-block; padding: 5px 18px; font-weight: bold; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; border: 2px solid #16a34a; color: #16a34a; }
        .status-banner .badge.pending { border-color: #d97706; color: #d97706; }

        .sign { margin-top: 36px; width: 100%; }
        .sign td { width: 50%; text-align: center; font-size: 10px; color: #555; padding: 0 24px; }
        .sign .line { border-top: 1px solid #555; padding-top: 4px; }

        .footer { margin-top: 26px; 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>
    {{#schoolMotto}}<div class="motto">{{schoolMotto}}</div>{{/schoolMotto}}
    <div class="meta">{{schoolMetaLine}}</div>
</div>

<h2 class="doc-title">Exeat Pass</h2>
<div class="reference">{{reference}}</div>

<table class="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">Hostel</td><td>{{hostel}}</td>
    </tr>
    <tr>
        <td class="label">Departure</td><td>{{departAt}}</td>
        <td class="label">Return due</td><td>{{returnDueAt}}</td>
    </tr>
    <tr>
        <td class="label">Reason</td><td colspan="3">{{reasonOr}}</td>
    </tr>
    {{#approvedBy}}
        <tr>
            <td class="label">Approved by</td><td colspan="3">{{approvedBy}}</td>
        </tr>
    {{/approvedBy}}
    {{#notes}}
        <tr>
            <td class="label">Notes</td><td colspan="3">{{notes}}</td>
        </tr>
    {{/notes}}
</table>

<div class="status-banner">
    {{#isApproved}}<span class="badge">{{status}}</span>{{/isApproved}}
    {{^isApproved}}<span class="badge pending">{{status}}</span>{{/isApproved}}
</div>

<table class="sign">
    <tr>
        <td><div class="line">House Master</div></td>
        <td><div class="line">Guardian / Parent</div></td>
    </tr>
</table>

<div class="footer">
    Issued {{issuedAt}}. Present this pass at the gate on departure and return. For queries, contact {{footerEmail}}.
</div>

</body>
</html>
