<!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 — Product Verification 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;
    }

    h2 {
        font-size: 12px;
        font-weight: bold;
        color: #1a3c5e;
        margin: 14px 0 6px 0;
        padding-bottom: 3px;
        border-bottom: 1px solid #1a3c5e;
    }

    .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;
    }

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

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

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

    .batch-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;
    }

    table.events tbody td.details {
        white-space: pre-line;
    }

    .col-no       { width: 5%;  }
    .col-date     { width: 18%; }
    .col-activity { width: 27%; }
    .col-user     { width: 22%; }
    .col-details  { width: 28%; }

    p.empty {
        margin: 4px 0 10px 0;
        font-style: italic;
        color: #555;
    }
</style>

<body>
    <div class="header-row">
        <div class="header-spacer"></div>
        <div class="header-center">
            <h1>Product Verification Audit Trail</h1>
            <div class="header-subtitle">Graviti Pharma — Line Clearance</div>
        </div>
        <img src="{{{graviti_logo}}}" />
    </div>

    <div class="batch-info">
        <table>
            <tr>
                <td class="label">Verified at Stage</td>
                <td>{{header.verified_at_stage}}</td>
                <td class="label">Product</td>
                <td>{{header.product_name}}</td>
            </tr>
            <tr>
                <td class="label">Batch (this stage)</td>
                <td>{{header.packing_batch_number}}</td>
                <td class="label">Previous Stage</td>
                <td>{{header.process}}</td>
            </tr>
            <tr>
                <td class="label">Previous Batch</td>
                <td>{{header.previous_batch_number}}</td>
                <td class="label">Incoming Stage Form</td>
                <td>{{header.stage}}</td>
            </tr>
        </table>
    </div>

    <h2>Product Verification Events</h2>
    {{#if has_events}}
    <table class="events">
        <thead>
            <tr>
                <th class="col-no">#</th>
                <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>{{inc @index}}</td>
                <td>{{this.timestamp_ist}}</td>
                <td>{{this.activity}}</td>
                <td>{{this.performed_by}}</td>
                <td class="details">{{this.details}}</td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    {{else}}
    <p class="empty">No product verification events recorded for this selection.</p>
    {{/if}}
</body>

</html>
