<html>
<head>
  <style>
    body { font-family: monospace; width: 80mm; margin: 0 auto; padding: 5px; color: #000; font-size: 12px; }
    .center { text-align: center; }
    .bold { font-weight: bold; }
    .divider { border-bottom: 1px dashed #000; margin: 5px 0; }
    table { width: 100%; border-collapse: collapse; }
    th, td { text-align: left; padding: 2px; }
    .right { text-align: right; }
  </style>
</head>
<body>
  <div class="center">
    <div class="bold" style="font-size: 16px;">{{business_name}}</div>
    <div>{{business_address}}</div>
    <div>Ph: {{business_phone}}</div>
    <div>GSTIN: {{business_gstin}}</div>
  </div>
  <div class="divider"></div>
  <div>Bill No: {{bill_number}}</div>
  <div>Date: {{bill_date}}</div>
  <div>Customer: {{party_name}}</div>
  <div class="divider"></div>
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th class="right">Qty</th>
        <th class="right">Amt</th>
      </tr>
    </thead>
    <tbody>
      {{#items}}
      <tr>
        <td>{{item_name}}</td>
        <td class="right">{{quantity}}</td>
        <td class="right">{{total_price}}</td>
      </tr>
      {{/items}}
    </tbody>
  </table>
  <div class="divider"></div>
  <table style="width: 100%;">
    <tr><td>Subtotal</td><td class="right">{{sub_total}}</td></tr>
    <tr><td>Tax</td><td class="right">{{tax_amount}}</td></tr>
    <tr><td class="bold">TOTAL</td><td class="right bold">{{total_amount}}</td></tr>
  </table>
  <div class="divider"></div>
  <div class="center">
    <div>Thank You! Visit Again</div>
  </div>
</body>
</html>