<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body { font-family: Arial, sans-serif; font-size: 11px; margin: 24px; }
    .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .title { font-size: 14px; font-weight: bold; flex: 1; text-align: center; }
    .header-logo { flex-shrink: 0; }
    .header-logo img { width: 100px; height: auto; }
    .section-title { font-weight: bold; margin: 12px 0 8px 0; }
    .inspection-section { margin-bottom: 16px; }
    .inspection-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
    .inspection-table th, .inspection-table td { border: 1px solid #333; padding: 6px 8px; text-align: left; font-size: 11px; }
    .inspection-table th { background: #f0f0f0; font-weight: bold; width: 40%; }
    .inspection-table .present-absent { width: 60%; }
    .inspection-table .present-absent-inner { display: flex; align-items: center; gap: 16px; }
    .inspection-table .option-cell { display: inline-flex; align-items: center; gap: 4px; }
    .inspection-table .checkbox { width: 14px; height: 14px; border: 1px solid #333; display: inline-block; vertical-align: middle; }
    .inspection-table .checkbox.checked { background: #333; }
    table { width: 100%; border-collapse: collapse; }
    th, td { border: 1px solid #333; padding: 6px 8px; text-align: left; }
    th { background: #f0f0f0; font-weight: bold; }
    tr.totals-row th, tr.totals-row td { font-weight: bold; background: #f5f5f5; }
    .footer { margin-top: 20px; font-size: 10px; color: #555; }
  </style>
</head>
<body>
  <div class="header">
    <div class="title">SAMPLING DETAILS RECORD</div>
    <div class="header-logo">
      <img src="https://lexystech.blob.core.windows.net/assets/graviti_logo.svg" alt="Graviti Pharma Logo" />
    </div>
  </div>

  {{!-- <div class="inspection-section">
    <table class="inspection-table">
      <tr>
        <th>9. Any non-characteristic odour</th>
        <td class="present-absent">
          <span class="present-absent-inner">
            <span class="option-cell">Present <span class="checkbox {{#if inspection.nonCharacteristicOdourPresent}}checked{{/if}}"></span> {{inspection.nonCharacteristicOdourPresentLabel}}</span>
            <span class="option-cell">Absent <span class="checkbox"></span></span>
          </span>
        </td>
      </tr>
      <tr>
        <th>10. Heterogeneity between container to container</th>
        <td class="present-absent">
          <span class="present-absent-inner">
            <span class="option-cell">Present <span class="checkbox {{#if inspection.heterogeneityPresent}}checked{{/if}}"></span> {{inspection.heterogeneityPresentLabel}}</span>
            <span class="option-cell">Absent <span class="checkbox"></span></span>
          </span>
        </td>
      </tr>
      <tr>
        <th>11. Foreign matter</th>
        <td class="present-absent">
          <span class="present-absent-inner">
            <span class="option-cell">Present <span class="checkbox {{#if inspection.foreignMatterPresent}}checked{{/if}}"></span> {{inspection.foreignMatterPresentLabel}}</span>
            <span class="option-cell">Absent <span class="checkbox"></span></span>
          </span>
        </td>
      </tr>
      <tr>
        <th>12. Any other abnormality</th>
        <td>{{inspection.otherAbnormality}}</td>
      </tr>
    </table>
  </div> --}}

  {{!-- <div class="section-title">13. Sampling details: Record the sampling quantity below for each sampled container</div> --}}
 <div style="margin-bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; font-size: 11px;">
    <div style="grid-column: 1 / -1"><strong>Material Name:</strong> {{batchInfo.materialName}}</div>
    <div><strong>Material Code:</strong> {{batchInfo.materialCode}}</div>
    <div><strong>Vendor Batch No.:</strong> {{batchInfo.vendorBatchNo}}</div>
    <div><strong>Batch Number:</strong> {{batchInfo.batchNumber}}</div>
    <div><strong>AR No.:</strong> {{batchInfo.arNumber}}</div>
</div>
  <table>
    <thead>
      <tr>
        <th>S.No</th>
        <th>Container</th>
        <th>Container No</th>
        <th>Source UOM</th>
        <th>Identification</th>
        <th>Pooled</th>
        <th>UOM</th>
        <th>Total</th>
        
      
        
      </tr>
    </thead>
    <tbody>
      {{#each tableRows}}
      <tr>
        <td>{{this.sNo}}</td>
        <td>{{this.containerNo}}</td>
        <td>{{this.containerSequenceNo}}</td>
        <td>{{this.sourceUOM}}</td>
        <td>{{this.identification}}</td>
        <td>{{this.tested}}</td>
        <td>{{this.uom}}</td>
        <td>{{this.total}}</td>
      </tr>
      {{/each}}
      <tr class="totals-row">
        <td></td>
        <th>Total</th>
        <td></td>
        <td></td>
        <td>{{totals.identification}}</td>
        <td>{{totals.tested}}</td>
        <td></td>
        <td>{{totals.total}}</td>
      </tr>
    </tbody>
  </table>
<div style="margin-top: 16px; font-size: 11px; display:flex; flex-direction: column; gap: 6px;">
    <span><strong>Employee ID:</strong> {{signerEmployeeId}}</span>
    {{!-- <span><strong>Name:</strong> {{signerName}}</span> --}}
    <span><strong>Date </strong> {{signedAt}}</span>
</div>
</body>
</html>
