<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Graviti Pharma — Material Receipt Audit Trail</title>
</head>
<style>
    body {
        font-family: Arial, sans-serif;
        font-size: 10px;
        color: #000;
        margin: 0;
        padding: 0;
    }

    h1 {
        text-align: center;
        font-size: 15px;
        font-weight: bold;
        color: #000;
        text-transform: uppercase;
        margin: 0 0 4px 0;
    }

    .header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 1px solid #1a3c5e;
    }

    .header-row img {
        width: 90px;
    }

    .header-center {
        flex: 1;
        text-align: center;
    }

    .header-spacer {
        width: 90px;
        flex-shrink: 0;
    }

    .header-subtitle {
        font-size: 11px;
        font-style: italic;
        color: #1a3c5e;
        margin: 2px 0 0 0;
        text-align: center;
        text-transform: none;
        font-weight: normal;
    }

    .receipt-info {
        margin: 10px 0 14px 0;
        font-size: 10px;
    }

    .receipt-info table {
        width: 100%;
        border-collapse: collapse;
    }

    .receipt-info td {
        padding: 6px 8px;
        border: 1px solid #ddd;
        vertical-align: top;
    }

    .receipt-info td.label {
        background-color: #f5f7fa;
        font-weight: bold;
        width: 18%;
    }

    table.events {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        font-size: 10px;
    }

    table.events thead th {
        background-color: #1a3c5e;
        color: #fff;
        font-weight: bold;
        padding: 6px 6px;
        text-align: left;
        border: 1px solid #1a3c5e;
        word-wrap: break-word;
    }

    table.events tbody tr:nth-child(even) {
        background-color: #f5f7fa;
    }

    table.events tbody tr:nth-child(odd) {
        background-color: #ffffff;
    }

    table.events tbody td {
        padding: 5px 6px;
        border: 1px solid #ddd;
        word-wrap: break-word;
        vertical-align: top;
        color: #222;
    }

    .col-date      { width: 18%; }
    .col-activity  { width: 30%; }
    .col-user      { width: 22%; }
    .col-details   { width: 30%; }

    .section-title {
        font-size: 12px;
        font-weight: bold;
        color: #1a3c5e;
        margin: 18px 0 6px 0;
    }

    .print-events-empty {
        font-size: 10px;
        color: #555;
        padding: 6px 0 0 2px;
    }
</style>

<body>
    <div class="header-row">
        <div class="header-spacer"></div>
        <div class="header-center">
            <h1>Material Receipt Audit Trail</h1>
            <div class="header-subtitle">Graviti Pharma</div>
        </div>
        <img src="{{{graviti_logo}}}" />
    </div>

    <div class="receipt-info">
        <table>
            <tr>
                <td class="label">Invoice Number</td>
                <td>{{receipt.invoice_number}}</td>
                <td class="label">Receipt Created</td>
                <td>{{receipt.createdAt}}</td>
            </tr>
            <tr>
                <td class="label">Status</td>
                <td>{{receipt.status}}</td>
                <td class="label">Up Next</td>
                <td>{{receipt.up_next}}</td>
            </tr>
        </table>
    </div>

    <table class="events">
        <thead>
            <tr>
                <th class="col-date">Date &amp; Time (IST)</th>
                <th class="col-activity">Activity</th>
                <th class="col-user">Performed By</th>
                <th class="col-details">Details</th>
            </tr>
        </thead>
        <tbody>
            {{#each events}}
            <tr>
                <td>{{this.timestamp}}</td>
                <td>{{this.activity}}</td>
                <td>{{this.performed_by}}</td>
                <td>{{this.details}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>

    <div class="section-title">Material Label Print Events</div>
    {{#if has_print_events}}
    <table class="events">
        <thead>
            <tr>
                <th class="col-date">Date &amp; Time (IST)</th>
                <th class="col-activity">Activity</th>
                <th class="col-user">Performed By</th>
                <th class="col-details">Details</th>
            </tr>
        </thead>
        <tbody>
            {{#each print_events}}
            <tr>
                <td>{{this.timestamp}}</td>
                <td>{{this.activity}}</td>
                <td>{{this.performed_by}}</td>
                <td>{{this.details}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    {{else}}
    <div class="print-events-empty">No label print events recorded for this receipt.</div>
    {{/if}}
</body>
</html>
