<html>
<head>
  <style>
    body { font-family: Arial, sans-serif; margin: 0; padding: 20px; color: #000; }
    .header { text-align: center; border-bottom: 2px solid #000; padding-bottom: 10px; margin-bottom: 20px; }
    .business-name { font-size: 24px; font-weight: bold; }
    .details { display: flex; justify-content: space-between; margin-bottom: 20px; }
    table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
    th, td { border: 1px solid #000; padding: 8px; text-align: left; }
    th { background-color: #f2f2f2; }
    .totals { text-align: right; margin-top: 20px; }
    .footer { text-align: center; margin-top: 40px; font-size: 12px; }
  </style>
</head>
<body>
  <div class="header">
    <div class="business-name">{{business_name}}</div>
    <div>{{business_address}}</div>
    <div>GSTIN: {{business_gstin}} | Phone: {{business_phone}}</div>
    <h2>TAX INVOICE</h2>
  </div>
  <div class="details">
    <div>
      <strong>Billed To:</strong><br>
      {{party_name}}<br>
      {{party_address}}<br>
      GSTIN: {{party_gstin}}
    </div>
    <div>
      <strong>Invoice No:</strong> {{bill_number}}<br>
      <strong>Date:</strong> {{bill_date}}<br>
      <strong>Vehicle No:</strong> {{vehicle_number}}
    </div>
  </div>
  <table>
    <thead>
      <tr>
        <th>S.No</th>
        <th>Description of Goods</th>
        <th>HSN/SAC</th>
        <th>Qty</th>
        <th>Unit</th>
        <th>Rate</th>
        <th>GST %</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      {{#items}}
      <tr>
        <td>{{index}}</td>
        <td>{{item_name}}</td>
        <td>{{hsn_code}}</td>
        <td>{{quantity}}</td>
        <td>{{unit}}</td>
        <td>{{unit_price}}</td>
        <td>{{tax_rate}}</td>
        <td>{{total_price}}</td>
      </tr>
      {{/items}}
    </tbody>
  </table>
  <div class="totals">
    <p>Sub Total: ₹{{sub_total}}</p>
    <p>Tax Amount: ₹{{tax_amount}}</p>
    <p>Round Off: ₹{{round_off}}</p>
    <h3>Grand Total: ₹{{total_amount}}</h3>
  </div>
  <div class="footer">
    <p>Authorized Signatory</p>
    <p>Thank you for your business!</p>
  </div>
</body>
</html>