<!DOCTYPE html>
<html>

<head>
  <title>WIP Material Label</title>
  {{{font_css}}}
  <style>
    /* A5 sheet: the label content sizes naturally (comfortable rows, no
       stretching) and starts at the top of the page, with the Format No
       pinned at the bottom (page footer). Rendered via
       render_single_page_pdf({ use_css_page_size: true }), which honors this
       @page size. Fonts are embedded via the font_css variable (see
       helpers/label_fonts.js) so the render is identical on Windows/Linux. */
    @page {
      size: A5;
      margin: 0;
    }

    html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .page {
      width: 148mm;
      height: 210mm;
      padding: 6mm;
      display: flex;
      flex-direction: column;
      font-family: 'Label Sans', Arial, sans-serif;
    }

    /* Content starts at the top of the page; remaining space stays as quiet
       whitespace between the label and the footer at the page bottom. */
    .fill {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #000;
    }

    th, td {
      padding: 11px 13px;
      text-align: left;
      border: 1px solid #000;
      vertical-align: top;
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    h4 {
      margin: 0;
    }

    .title-row {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
    }

    .logo {
      text-align: right;
      padding-right: 16px;
    }

    .qr-code {
      text-align: center;
      vertical-align: middle;
      box-sizing: border-box;
    }

    .qr-code img {
      width: 200px;
      height: 200px;
      display: block;
      margin: 0 auto;
    }

    .footer {
      flex: 0 0 auto;
      padding-top: 4mm;
      font-size: 10px;
      font-family: 'Label Sans', Arial, sans-serif;
    }
  </style>
</head>

<body>
  {{#each this.containers}}
  <div class="page">
    <div class="fill">
      <table>
        <!-- Title and Logo -->
        <tr>
          <td class="title-row">
            WIP Material Label
          </td>
          <td colspan="2" class="logo">
            <img src="https://lexystech.blob.core.windows.net/assets/graviti_logo.svg" alt="Graviti Pharma Logo" width="150">
          </td>
        </tr>

        <tr>
          <td colspan="4"><strong>Product Name:</strong> {{product_name}}</td>
        </tr>

        <tr>
          <td><strong>Product Batch #:</strong> {{product_batch}}</td>
          <td colspan="2"><strong>Weighing Balance:</strong> {{weighingBalance}}</td>
        </tr>
        <tr>
          <td><strong>Process:</strong> {{process_label}}</td>
          <td colspan="2"><strong>Stage:</strong> {{process_stage}}</td>
        </tr>
        <tr>
          <td><strong>Next Stage:</strong> {{process_next_stage}}</td>
          <td colspan="2"><strong>Hold Time:</strong> {{hold_time}}</td>
        </tr>
        <tr>
          <td><strong>Batch Size:</strong> {{batch_size}}</td>
          <td rowspan="4" colspan="2" class="qr-code">
            <!-- Placeholder for QR code -->
            <img src="{{this.qr}}" alt="QR Code">
          </td>
        </tr>
        <tr>
          <td colspan="2"><strong>Lot No:</strong> {{lot_no}}</td>
        </tr>
        <tr>
          <td><strong>Container Count:</strong> {{container_count}}</td>
        </tr>
        <tr>
          <td><strong>Container #:</strong>  {{container_number}}</td>
        </tr>
        <tr>
          <td><strong>Tare Wt:</strong> {{tare_weight}}</td>
          <td colspan="2"><strong>Net Wt:</strong> {{net_weight}}</td>
        </tr>
        <tr>
          <td><strong>Gross Wt:</strong> {{gross_weight}}</td>
          <td colspan="2">
            <strong>Weighed by:</strong> {{performed_by}}<br>
            <strong>Date:</strong> {{date}}
          </td>
        </tr>
      </table>
    </div>
    <div class="footer"><strong>Format No:</strong> {{format_no}}</div>
  </div>
  {{/each}}
</body>

</html>
