

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Product Label Audit</title>
  <style>
    body {
      font-family: "Arial", sans-serif;
      font-size: 14px;
      padding: 30px;
    }
    table {
      border-collapse: separate;
      width: 100%;
      border-spacing: 0;
    }
    th, td {
      border: 1px solid #999;
      text-align: center;
      padding: 20px;
      vertical-align: middle;
    }
    thead th {
      background-color: #f0f0f0;
      font-size: 18px;
    }
    th[colspan] {
      background-color: #e8e8e8;
      font-size: 18px;
    }
    @media print {
      body {
        margin: 0;
      }
      /* Repeat the column header on every page. */
      thead {
        display: table-header-group;
      }
      /* Keep each product's whole block together: every product group is its
         own table body group, so a product whose rows would straddle a page
         boundary is moved entirely to the next page instead of being sliced in
         half (its rowspan cells used to get cut). The tr rule below is kept as
         a fallback for any single oversized row. */
      tbody {
        page-break-inside: avoid;
      }
      tr {
        page-break-inside: avoid;
      }
    }
  </style>
</head>
<body>
  <table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-bottom: 20px; border-collapse: collapse;">
  <tr>
    <td style="border: none; text-align: center; font-size: 28px; padding-top: 50px; padding-left: 400px; font-weight: bold; text-transform: uppercase;">
      WIP Inward Log Book
    </td>
    <td style="border: none; text-align: right;">
      <img src="https://lexystech.blob.core.windows.net/assets/graviti_logo.svg" width="250" />
    </td>
  </tr>
</table>
  <table>
  <thead>
    <tr>
      <th colspan="4"><strong>PRODUCT DETAILS</strong></th>
      <th colspan="4"><strong>Inward Entry</strong></th>
    </tr>
    <tr>
      <th>Product Name</th>
      <th>Batch Number</th>
      <th>Stage</th>
      <th>Next Stage</th>
      <th>Container ID</th>
      <th>Quantity</th>
      <th>Total Quantity</th>
      <th>Inwarded By PR<br>Sign & Date</th>
    </tr>
  </thead>
    {{#each logs}}
  <tbody>
  {{#each inwardDetails}}
    <tr>
      {{#if @first}}
        <td rowspan="{{../inwardDetails.length}}">{{../product_name}}</td>
        <td rowspan="{{../inwardDetails.length}}">{{../batch_number}}</td>
        <td rowspan="{{../inwardDetails.length}}">{{../stage}}</td>
        <td rowspan="{{../inwardDetails.length}}">{{../nextstage}}</td>
      {{/if}}
      <td>{{total_no_of_containers}}</td>
      <td>{{total_qty}}</td>
      {{#if @first}}
        <td rowspan="{{../inwardDetails.length}}">{{totalQty}}</td>
      {{/if}}
      <td>{{inwarded_by}}</td>
    </tr>
  {{/each}}
  </tbody>
{{/each}}
</table>
</body>
</html>
