<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>{{ title }} | {{ app.name }}</title>
  <style>
    @page { size: A4; margin: 12mm 12mm 18mm; }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      color: #111827;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 10px;
    }
    .page {
      position: relative;
      width: 100%;
      padding: 0 0 13mm;
      background: #ffffff;
    }
    .header {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 11mm;
    }
    .header td {
      vertical-align: top;
      border: 0;
      padding: 0;
    }
    .logo {
      width: 62mm;
      height: auto;
      max-height: 22mm;
      margin-bottom: 4mm;
    }
    .tagline {
      color: #546673;
      font-size: 11px;
    }
    .document-title {
      color: #083247;
      font-size: 36px;
      font-weight: 400;
      line-height: 1;
      margin: 0 0 6mm;
      text-align: right;
      text-transform: uppercase;
    }
    .doc-meta {
      width: 72mm;
      margin-left: auto;
      border-collapse: collapse;
    }
    .doc-meta th,
    .doc-meta td {
      border: 0;
      padding: 1.1mm 0;
      font-size: 10.5px;
      line-height: 1.2;
    }
    .doc-meta th {
      color: #111827;
      font-weight: 700;
      text-align: right;
      text-transform: uppercase;
      width: 37mm;
    }
    .doc-meta td {
      color: #546673;
      text-align: right;
      width: 37mm;
    }
    .recipient {
      margin-bottom: 8mm;
    }
    .recipient h2 {
      margin: 0 0 4mm;
      color: #111827;
      font-size: 18px;
      text-transform: uppercase;
    }
    .recipient p {
      margin: 1.6mm 0;
      color: #334155;
      font-size: 10.5px;
      line-height: 1.25;
      word-break: break-word;
    }
    .items {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
    }
    .items .col-sl { width: 7%; }
    .items .col-description { width: 51%; }
    .items .col-unit-price { width: 15%; }
    .items .col-quantity { width: 10%; }
    .items .col-total { width: 17%; }
    .items.no-financials .col-description { width: 78%; }
    .items th {
      background: #0ea5e9;
      border-bottom: 2mm solid #f6c77a;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      padding: 7px 7px;
      text-align: left;
      text-transform: uppercase;
    }
    .items td {
      border: 0.25mm solid #ccd6dc;
      border-top: 0;
      padding: 7px 7px;
      font-size: 9.5px;
      line-height: 1.22;
      vertical-align: top;
      overflow-wrap: break-word;
      word-break: normal;
    }
    .items .number-cell {
      text-align: right;
      white-space: nowrap;
    }
    .item-name {
      display: block;
      margin-bottom: 1.2mm;
      color: #111827;
      font-size: 9.5px;
      font-weight: 700;
      text-transform: uppercase;
    }
    .item-desc {
      color: #546673;
      font-size: 9px;
    }
    .summary {
      width: 100%;
      margin: 0;
      border-collapse: collapse;
      table-layout: fixed;
    }
    .summary .col-sl { width: 7%; }
    .summary .col-description { width: 51%; }
    .summary .col-unit-price { width: 15%; }
    .summary .col-quantity { width: 10%; }
    .summary .col-total { width: 17%; }
    .summary td {
      border: 0.25mm solid #ccd6dc;
      border-top: 0;
      padding: 7px 7px;
      font-size: 9.5px;
      text-transform: uppercase;
    }
    .summary .summary-spacer {
      border: 0;
      padding: 0;
    }
    .summary .summary-label {
      text-align: left;
      white-space: nowrap;
    }
    .summary .summary-amount {
      text-align: right;
      white-space: nowrap;
    }
    .summary .grand .summary-label,
    .summary .grand .summary-amount {
      font-weight: 700;
    }
    .bottom {
      margin-top: 12mm;
      width: 100%;
      border-collapse: collapse;
    }
    .bottom td {
      border: 0;
      padding: 0;
      vertical-align: bottom;
    }
    .terms {
      width: 58%;
    }
    .terms h3 {
      margin: 0 0 2mm;
      color: #111827;
      font-size: 10.5px;
      text-transform: uppercase;
    }
    .terms p {
      margin: 0 0 5mm;
      color: #374151;
      font-size: 9px;
      line-height: 1.4;
      white-space: pre-line;
    }
    .bank {
      width: 72mm;
      border-collapse: collapse;
      margin-bottom: 5mm;
    }
    .bank td,
    .bank th {
      border: 0;
      padding: 0.5mm 0;
      font-size: 9px;
      text-align: left;
    }
    .bank td {
      color: #546673;
      font-weight: 400;
      width: 26mm;
    }
    .bank th {
      color: #111827;
      font-weight: 700;
    }
    .signature {
      width: 54mm;
      margin-left: auto;
      text-align: center;
    }
    .signature-line {
      border-top: 0.7mm solid #55c5ef;
      height: 3mm;
      margin-bottom: 1mm;
    }
    .signature strong {
      display: block;
      font-size: 12px;
    }
    .signature p {
      margin: 1mm 0 0;
      color: #546673;
      font-size: 9.5px;
    }
    .footer {
      position: fixed;
      left: -12mm;
      right: -12mm;
      bottom: -18mm;
      height: 12mm;
      border-top: 2mm solid #f6c77a;
      background: #0ea5e9;
      color: #ffffff;
      font-size: 9.5px;
      line-height: 10mm;
      text-align: center;
    }
    .footer span {
      display: inline-block;
      width: 54mm;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </style>
</head>
<body>
  <main class="page">
    <table class="header">
      <tr>
        <td style="width: 52%;">
          <img class="logo" src="{{ logo_src|default(base_url ~ '/assets/images/sync-solutionz-logo.png') }}" alt="SYNC Computer Solutionz">
          <div class="tagline">{{ company.tax_number ?: 'Office finance documents' }}</div>
        </td>
        <td style="width: 48%;">
          <h1 class="document-title">{{ document_label }}</h1>
          <table class="doc-meta">
            <tr><th>{{ document_label }} Number</th><td>{{ document.document_number }}</td></tr>
            <tr><th>{{ document_label }} Date</th><td>{{ document.issue_date }}</td></tr>
            <tr><th>{{ secondary_date_label }}</th><td>{{ secondary_date ?: '-' }}</td></tr>
            <tr><th>Status</th><td>{{ document.status|replace({'_': ' '})|title }}</td></tr>
          </table>
        </td>
      </tr>
    </table>

    <section class="recipient">
      <h2>{{ document_label }} To</h2>
      <p><strong>{{ document.customer_name }}</strong></p>
      {% if document.company_name %}<p>{{ document.company_name }}</p>{% endif %}
      {% if document.phone %}<p>{{ document.phone }}</p>{% endif %}
      {% if document.email %}<p>{{ document.email }}</p>{% endif %}
      {% if document.billing_address %}<p>{{ document.billing_address|nl2br }}</p>{% endif %}
    </section>

    <table class="items {% if show_financials is defined and not show_financials %}no-financials{% endif %}">
      <colgroup>
        <col class="col-sl" width="7%" style="width: 7%;">
        <col class="col-description" width="{% if show_financials is defined and not show_financials %}78%{% else %}51%{% endif %}" style="width: {% if show_financials is defined and not show_financials %}78{% else %}51{% endif %}%;">
        {% if show_financials is not defined or show_financials %}
          <col class="col-unit-price" width="15%" style="width: 15%;">
          <col class="col-quantity" width="10%" style="width: 10%;">
          <col class="col-total" width="17%" style="width: 17%;">
        {% else %}
          <col class="col-quantity" width="15%" style="width: 15%;">
        {% endif %}
      </colgroup>
      <thead>
        <tr>
          <th class="col-sl" width="7%">SL.</th>
          <th class="col-description" width="{% if show_financials is defined and not show_financials %}78%{% else %}51%{% endif %}">Item Description</th>
          {% if show_financials is not defined or show_financials %}
            <th class="col-unit-price number-cell" width="15%">Unit Price</th>
            <th class="col-quantity number-cell" width="10%">Quantity</th>
            <th class="col-total number-cell" width="17%">Total</th>
          {% else %}
            <th class="col-quantity number-cell" width="15%">Quantity</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        {% for item in document.items %}
          <tr>
            <td class="col-sl" width="7%">{{ '%02d'|format(loop.index) }}</td>
            <td class="col-description" width="{% if show_financials is defined and not show_financials %}78%{% else %}51%{% endif %}">
              <span class="item-name">{{ item.name }}</span>
              {% if item.description %}<span class="item-desc">{{ item.description }}</span>{% endif %}
            </td>
            {% if show_financials is not defined or show_financials %}
              <td class="col-unit-price number-cell" width="15%">{{ document.currency }} {{ item.unit_price|number_format(2) }}</td>
              <td class="col-quantity number-cell" width="10%">{{ item.quantity|number_format(2) }}</td>
              <td class="col-total number-cell" width="17%">{{ document.currency }} {{ item.line_total|number_format(2) }}</td>
            {% else %}
              <td class="col-quantity number-cell" width="15%">{{ item.quantity|number_format(2) }}</td>
            {% endif %}
          </tr>
        {% endfor %}
      </tbody>
    </table>

    {% if show_financials is not defined or show_financials %}
      <table class="summary">
        <colgroup>
          <col class="col-sl" width="7%" style="width: 7%;">
          <col class="col-description" width="51%" style="width: 51%;">
          <col class="col-unit-price" width="15%" style="width: 15%;">
          <col class="col-quantity" width="10%" style="width: 10%;">
          <col class="col-total" width="17%" style="width: 17%;">
        </colgroup>
        <tr>
          <td class="summary-spacer" colspan="2"></td>
          <td class="summary-label" colspan="2">Sub Total</td>
          <td class="summary-amount">{{ document.currency }} {{ document.subtotal|number_format(2) }}</td>
        </tr>
        <tr>
          <td class="summary-spacer" colspan="2"></td>
          <td class="summary-label" colspan="2">Discount</td>
          <td class="summary-amount">- {{ document.currency }} {{ document.discount_total|number_format(2) }}</td>
        </tr>
        <tr>
          <td class="summary-spacer" colspan="2"></td>
          <td class="summary-label" colspan="2">Tax</td>
          <td class="summary-amount">{{ document.currency }} {{ document.tax_total|number_format(2) }}</td>
        </tr>
        <tr class="grand">
          <td class="summary-spacer" colspan="2"></td>
          <td class="summary-label" colspan="2">Grand Total</td>
          <td class="summary-amount">{{ document.currency }} {{ document.grand_total|number_format(2) }}</td>
        </tr>
      </table>
    {% endif %}

    <table class="bottom">
      <tr>
        <td class="terms">
          {% if show_bank_information is not defined or show_bank_information %}
            <h3>Bank Information</h3>
            <table class="bank">
              <tr><td>Bank Name</td><th>Bank Name Here</th></tr>
              <tr><td>Branch Code</td><th>000000</th></tr>
              <tr><td>Account No.</td><th>00 000 000 000</th></tr>
            </table>
          {% endif %}
          <h3>{{ notes_heading|default('Terms And Conditions') }}</h3>
          <p>{{ document.notes ?: notes_fallback|default('Payment is due according to the terms agreed for this document.') }}</p>
        </td>
        <td>
          <div class="signature">
            <div class="signature-line"></div>
            <strong>Authorized Signature</strong>
            <p>{{ company.name }}</p>
          </div>
        </td>
      </tr>
    </table>

    <div class="footer">
      <span>{{ company.phone ?: '+254 700 000 000' }}</span>
      <span>{{ company.email ?: 'finance@example.com' }}</span>
      <span>{{ company.address ?: 'Nairobi, Kenya' }}</span>
    </div>
  </main>
</body>
</html>
