<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body { font-family: Arial, sans-serif; font-size: 11px; margin: 0; padding: 0; color: #222; }
    .header { text-align: center; margin-bottom: 16px; border-bottom: 2px solid #c91761; padding-bottom: 8px; }
    .header h1 { font-size: 16px; color: #c91761; margin: 0 0 4px; }
    .header p { margin: 2px 0; color: #555; font-size: 10px; }
    table { width: 100%; border-collapse: collapse; }
    th { background: #c91761; color: #fff; padding: 6px 8px; text-align: left; font-size: 10px; white-space: nowrap; }
    td { padding: 5px 8px; border-bottom: 1px solid #eee; vertical-align: top; font-size: 10px; }
    tr:nth-child(even) td { background: #fafafa; }
    .hvac-num { font-family: monospace; font-weight: bold; }
    .no-data { text-align: center; color: #888; padding: 24px; }
    .footer { margin-top: 16px; font-size: 9px; color: #aaa; text-align: right; border-top: 1px solid #ddd; padding-top: 6px; }
  </style>
</head>
<body>
  <div class="header">
    <h1>HVAC Filter Activity Log</h1>
    <p>Period: {{from_date}} to {{to_date}}</p>
    <p>Generated by {{generated_by}} on {{generated_on}}</p>
  </div>

  {{#if no_activity}}
    <p class="no-data">No activity found for the selected date range.</p>
  {{else}}
    <table>
      <thead>
        <tr>
          <th>Timestamp (IST)</th>
          <th>HVAC Number</th>
          <th>Activity</th>
          <th>Performed By</th>
          <th>Details</th>
        </tr>
      </thead>
      <tbody>
        {{#each rows}}
        <tr>
          <td>{{this.timestamp_formatted}}</td>
          <td class="hvac-num">{{this.hvac_label_number}}</td>
          <td>{{this.action_label}}</td>
          <td>{{this.performed_by_name}}</td>
          <td>{{this.details_formatted}}</td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  {{/if}}

  <div class="footer">Nucleus MES &mdash; Graviti Pharma &mdash; Printed by {{generated_by}} on {{generated_on}}</div>
</body>
</html>
