<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #222; padding: 20px 24px; }
  h1 { font-size: 20px; text-align: center; margin-bottom: 6px; color: #1a1a1a; }
  .meta { text-align: center; color: #555; font-size: 11px; margin-bottom: 24px; }
  .filter-section { margin-bottom: 28px; page-break-inside: avoid; }
  .filter-heading {
    font-size: 13px; font-weight: bold; background: #f0f2f5;
    padding: 7px 12px; border-left: 4px solid #1a1a2e; margin-bottom: 0;
  }
  table { width: 100%; border-collapse: collapse; font-size: 11px; }
  thead tr { background: #1a1a2e; color: #ffffff; }
  th { padding: 7px 10px; text-align: left; font-weight: 600; }
  td { padding: 6px 10px; border-bottom: 1px solid #e8e8e8; vertical-align: top; }
  tr:nth-child(even) td { background: #fafafa; }
  .no-activity { text-align: center; color: #999; padding: 20px; font-style: italic; }
  .footer { margin-top: 40px; border-top: 1px solid #ddd; padding-top: 8px;
            font-size: 10px; color: #888; text-align: center; }
</style>
</head>
<body>

<h1>HVAC Filter Usage Log Report</h1>

{{#if is_single_filter}}
  <p class="meta">HVAC Filter: <strong>{{hvac_label_number}}</strong></p>
{{else}}
  <p class="meta">
    Period: <strong>{{from_date}}</strong> to <strong>{{to_date}}</strong>
    &nbsp;&nbsp;|&nbsp;&nbsp;
    Generated by: <strong>{{generated_by}}</strong>
    &nbsp;&nbsp;|&nbsp;&nbsp;
    Generated on: <strong>{{generated_on}}</strong>
  </p>
{{/if}}

{{#each filters}}
<div class="filter-section">
  <div class="filter-heading">HVAC Filter: {{this.hvac_label_number}}</div>
  <table>
    <thead>
      <tr>
        <th style="width:190px;">Timestamp (IST)</th>
        <th style="width:170px;">Activity</th>
        <th style="width:160px;">Performed By</th>
        <th>Details</th>
      </tr>
    </thead>
    <tbody>
      {{#each this.logs}}
      <tr>
        <td>{{this.timestamp_formatted}}</td>
        <td>{{this.action_label}}</td>
        <td>{{this.performed_by_name}}</td>
        <td>{{this.details_formatted}}</td>
      </tr>
      {{/each}}
    </tbody>
  </table>
</div>
{{/each}}

{{#if no_activity}}
  <p class="no-activity">No activity recorded for the selected period.</p>
{{/if}}

<div class="footer">
  Printed by: <strong>{{printed_by}}</strong> &nbsp;|&nbsp; Printed on: <strong>{{printed_on}}</strong>
</div>

</body>
</html>
