Stirling-PDF/engine/src/default_templates/purchase_order.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{DOCUMENT_TITLE}}</title>
  <style>
    /* ── Theme variables (replaced at generation time) ── */
    {{THEME_CSS}}

    /* ── Print / page setup ── */
    @page {
      size: A4;
      margin: 20mm 20mm 20mm 20mm;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--theme-font, 'Helvetica Neue', Arial, sans-serif);
      font-size: 10pt;
      color: var(--theme-text, #1a1a1a);
      background: var(--theme-bg, #ffffff);
      line-height: 1.4;
    }

    /* ── Document wrapper ── */
    .document {
      max-width: 170mm;
      margin: 0 auto;
      padding: 0;
    }

{{HEADER_CSS}}

    /* ── Divider ── */
    hr {
      border: none;
      border-top: 0.5pt solid var(--theme-border, #e2e8f0);
      margin: 6pt 0;
    }

    /* ── Meta info grid ── */
    .meta-grid {
      display: grid;
      grid-template-columns: 120pt auto;
      row-gap: 2pt;
      margin-bottom: 8pt;
    }

    .meta-label {
      font-weight: 600;
      color: var(--theme-text-muted, #6b7280);
      font-size: 8.5pt;
    }

    .meta-value {
      font-size: 8.5pt;
      color: var(--theme-text, #1a1a1a);
    }

    /* ── Section heading ── */
    .section-heading {
      font-size: 10pt;
      font-weight: 700;
      color: var(--theme-primary, #1e3a5f);
      border-bottom: 1pt solid var(--theme-accent, #2563eb);
      padding-bottom: 2pt;
      margin: 10pt 0 6pt;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* ── Parties grid ── */
    .parties-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10pt;
      margin-bottom: 8pt;
    }

    .party-card {
      border: 0.5pt solid var(--theme-border, #e2e8f0);
      border-radius: 3pt;
      padding: 6pt 8pt;
    }

    .party-card-header {
      font-size: 8pt;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: var(--theme-accent, #2563eb);
      margin-bottom: 4pt;
    }

    .party-name {
      font-size: 9.5pt;
      font-weight: 600;
      color: var(--theme-heading, #111827);
      margin-bottom: 2pt;
    }

    .party-detail {
      font-size: 8pt;
      color: var(--theme-text-muted, #6b7280);
      line-height: 1.5;
    }

    /* ── Addresses row ── */
    .addresses-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10pt;
      margin-bottom: 8pt;
    }

    /* ── Line items table ── */
    .items-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 6pt;
      font-size: 8.5pt;
    }

    .items-table thead tr {
      background: var(--theme-primary, #1e3a5f);
      color: #ffffff;
    }

    .items-table thead th {
      padding: 5pt 6pt;
      text-align: left;
      font-weight: 600;
      white-space: nowrap;
    }

    .items-table thead th.num {
      text-align: right;
    }

    .items-table tbody tr:nth-child(even) {
      background: var(--theme-surface, #f8fafc);
    }

    .items-table tbody td {
      padding: 4pt 6pt;
      border-bottom: 0.3pt solid var(--theme-border, #e2e8f0);
      vertical-align: top;
    }

    .items-table tbody td.num {
      text-align: right;
      white-space: nowrap;
    }

    .items-table .desc-col {
      width: 45%;
    }

    /* ── Totals block ── */
    .totals-wrapper {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10pt;
    }

    .totals-table {
      border-collapse: collapse;
      font-size: 8.5pt;
      min-width: 140pt;
    }

    .totals-table td {
      padding: 2pt 6pt;
    }

    .totals-table td:first-child {
      color: var(--theme-text-muted, #6b7280);
      text-align: left;
    }

    .totals-table td:last-child {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .totals-table .total-row td {
      font-weight: 700;
      font-size: 9.5pt;
      border-top: 1pt solid var(--theme-primary, #1e3a5f);
      padding-top: 4pt;
      color: var(--theme-heading, #111827);
    }

    /* ── Notes / text sections ── */
    .text-section {
      font-size: 8.5pt;
      color: var(--theme-text, #1a1a1a);
      line-height: 1.5;
      margin-bottom: 4pt;
    }

    /* ── Authorization ── */
    .auth-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 8.5pt;
      margin-top: 4pt;
    }

    .auth-table td:first-child {
      font-weight: 600;
      color: var(--theme-text-muted, #6b7280);
      width: 100pt;
      padding: 2pt 0;
    }

    .auth-table td:last-child {
      padding: 2pt 6pt;
    }

    /* ── Footer note ── */
    .footer-note {
      margin-top: 10pt;
      padding-top: 6pt;
      border-top: 0.5pt solid var(--theme-border, #e2e8f0);
      font-size: 7.5pt;
      color: var(--theme-text-muted, #6b7280);
    }

    /* ── Page-break controls ── */
    thead { display: table-header-group; }
    tr { break-inside: avoid; page-break-inside: avoid; }
    .section-heading { break-after: avoid; page-break-after: avoid; }
    .totals-wrapper { break-inside: avoid; page-break-inside: avoid; }
    .totals-table { break-inside: avoid; page-break-inside: avoid; }
    .party-card { break-inside: avoid; page-break-inside: avoid; }

    /* ── Print overrides ── */
    @media print {
      body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .document { max-width: 100%; }
    }
  </style>
</head>
<body>
  <div class="document">

    <div class="top-bar"></div>

    <!-- Header -->
    <div class="doc-header">
      {{LOGO_BLOCK}}
      <div class="doc-header-text">
        <div class="doc-title">{{DOCUMENT_TITLE}}</div>
        <div class="doc-subtitle">{{BUYER_NAME}}</div>
      </div>
      <div class="doc-number-area">
        <div class="doc-number-label">PO Number</div>
        <div class="doc-number">{{PO_NUMBER}}</div>
      </div>
    </div>

    <hr>

    <!-- Meta info -->
    <div class="meta-grid">
      <span class="meta-label">PO Date:</span>          <span class="meta-value">{{PO_DATE}}</span>
      <span class="meta-label">Buyer Reference:</span>  <span class="meta-value">{{BUYER_REFERENCE}}</span>
      <span class="meta-label">Vendor Reference:</span> <span class="meta-value">{{VENDOR_REFERENCE}}</span>
      <span class="meta-label">Currency:</span>         <span class="meta-value">{{CURRENCY}}</span>
      <span class="meta-label">Requested Delivery:</span><span class="meta-value">{{REQUESTED_DELIVERY_DATE}}</span>
      <span class="meta-label">Delivery Method:</span>  <span class="meta-value">{{DELIVERY_METHOD}}</span>
      <span class="meta-label">Incoterms:</span>        <span class="meta-value">{{INCOTERMS}}</span>
      <span class="meta-label">Payment Terms:</span>    <span class="meta-value">{{PAYMENT_TERMS}}</span>
      <span class="meta-label">Confidentiality:</span>  <span class="meta-value">{{CONFIDENTIALITY_LABEL}}</span>
    </div>

    <hr>

    <!-- Parties -->
    <div class="section-heading">Parties &amp; Addresses</div>
    <div class="parties-grid">
      <div class="party-card">
        <div class="party-card-header">Buyer</div>
        <div class="party-name">{{BUYER_NAME}}</div>
        <div class="party-detail">{{BUYER_ADDRESS}}</div>
        <div class="party-detail">Contact: {{BUYER_CONTACT_NAME}}</div>
        <div class="party-detail">Email: {{BUYER_CONTACT_EMAIL}}</div>
        <div class="party-detail">Phone: {{BUYER_CONTACT_PHONE}}</div>
      </div>
      <div class="party-card">
        <div class="party-card-header">Vendor</div>
        <div class="party-name">{{VENDOR_NAME}}</div>
        <div class="party-detail">{{VENDOR_ADDRESS}}</div>
        <div class="party-detail">Contact: {{VENDOR_CONTACT_NAME}}</div>
        <div class="party-detail">Email: {{VENDOR_CONTACT_EMAIL}}</div>
        <div class="party-detail">Phone: {{VENDOR_CONTACT_PHONE}}</div>
      </div>
    </div>

    <div class="addresses-row">
      <div class="party-card">
        <div class="party-card-header">Bill To</div>
        <div class="party-name">{{BILL_TO_NAME}}</div>
        <div class="party-detail">{{BILL_TO_ADDRESS}}</div>
      </div>
      <div class="party-card">
        <div class="party-card-header">Ship To</div>
        <div class="party-name">{{SHIP_TO_NAME}}</div>
        <div class="party-detail">{{SHIP_TO_ADDRESS}}</div>
      </div>
    </div>

    <!-- Line Items -->
    <div class="section-heading">Line Items</div>
    <table class="items-table">
      <thead>
        <tr>
          <th style="width:24pt">#</th>
          <th class="desc-col">Description</th>
          <th class="num" style="width:36pt">Qty</th>
          <th class="num" style="width:55pt">Unit Price</th>
          <th class="num" style="width:55pt">Line Total</th>
        </tr>
      </thead>
      <tbody>
        {{LINEITEM_ROWS}}
      </tbody>
    </table>

    <!-- Totals -->
    <div class="totals-wrapper">
      <table class="totals-table">
        <tbody>
          <tr><td>Subtotal:</td><td>{{SUBTOTAL_TEXT}}</td></tr>
          <tr><td>Tax:</td><td>{{TAX_TEXT}}</td></tr>
          <tr><td>Shipping:</td><td>{{SHIPPING_TEXT}}</td></tr>
          <tr><td>Discount:</td><td>{{DISCOUNT_TEXT}}</td></tr>
          <tr class="total-row"><td>Total:</td><td>{{TOTAL_TEXT}}</td></tr>
        </tbody>
      </table>
    </div>

    <!-- Notes -->
    <div class="section-heading">Notes</div>
    <div class="text-section">{{NOTES_TEXT}}</div>

    <!-- Special Instructions -->
    <div class="section-heading">Special Instructions</div>
    <div class="text-section">{{SPECIAL_INSTRUCTIONS_TEXT}}</div>

    <!-- Terms -->
    <div class="section-heading">Terms and Conditions</div>
    <div class="text-section">{{TERMS_TEXT}}</div>

    <!-- Authorization -->
    <div class="section-heading">Authorisation</div>
    <table class="auth-table">
      <tbody>
        <tr><td>Authorised by:</td><td>{{AUTHORIZED_BY}}</td></tr>
        <tr><td>Title:</td><td>{{AUTHORIZED_TITLE}}</td></tr>
        <tr><td>Date:</td><td>{{AUTHORIZED_DATE}}</td></tr>
      </tbody>
    </table>

    <!-- Footer -->
    <div class="footer-note">{{FOOTER_NOTE}}</div>

  </div>
</body>
</html>