{
  "format": "jmeryar-print-template",
  "version": 1,
  "id": "modern-en",
  "doc_type": "sell_invoice",
  "locale": "en",
  "name": {
    "en": "Modern invoice",
    "ku": "پسوڵەی مۆدێرن",
    "ar": "فاتورة عصرية",
    "fa": "فاکتور مدرن",
    "de": "Rechnung „Modern“"
  },
  "description": {
    "en": "A4 sell invoice with a coloured band across the top, striped rows and the total in a highlighted card. The colour is one line to change.",
    "ku": "پسوڵەی فرۆشتنی A4 بە پشتێنێکی ڕەنگاوڕەنگ لە سەرەوە، ڕیزی خەتدار و کۆی گشتی لە کارتێکی دیاردا. ڕەنگەکە بە گۆڕینی یەک دێڕ دەگۆڕدرێت.",
    "ar": "فاتورة بيع بحجم A4 مع شريط ملون في الأعلى وصفوف مخططة والإجمالي في بطاقة بارزة. يُغيَّر اللون بسطر واحد.",
    "fa": "فاکتور فروش A4 با نوار رنگی در بالا، ردیف‌های راه‌راه و جمع کل در یک کارت برجسته. رنگ با تغییر یک خط عوض می‌شود.",
    "de": "A4-Verkaufsrechnung mit farbigem Kopfband, gestreiften Zeilen und dem Gesamtbetrag in einer hervorgehobenen Karte. Die Farbe ist eine einzige Zeile."
  },
  "content": "{%- comment -%}\n  Sell invoice — MODERN (English). From the jmeryar template library.\n  A4, a coloured band across the top, the totals in a card. Change the colour in\n  one place: --accent below. Every figure arrives already written the way this\n  install writes numbers and dates; .ltr keeps a figure in one piece inside\n  right-to-left text.\n{%- endcomment -%}\n{%- assign org_name = branch.invoice_title | default: branch.company_name | default: branch.name | default: invoice.branch_name -%}\n{%- case digits -%}{%- when \"persian\" -%}{%- assign page_digits = \"persian\" -%}{%- when \"arabic\" -%}{%- assign page_digits = \"arabic-indic\" -%}{%- else -%}{%- assign page_digits = \"decimal\" -%}{%- endcase -%}\n<!doctype html>\n<html lang=\"en\" dir=\"ltr\">\n<head>\n<meta charset=\"utf-8\">\n<title>Invoice {{ invoice.number }}</title>\n<style>\n  :root { --accent:#0f766e; --accent-soft:#ccfbf1; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --zebra:#f8fafc; }\n  * { box-sizing: border-box; }\n  html, body { margin: 0; padding: 0; }\n  body {\n    font-family: -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; color: var(--ink); font-size: 11.5px; line-height: 1.55; background: #e2e8f0;\n    -webkit-print-color-adjust: exact; print-color-adjust: exact;\n  }\n  .sheet { width: 210mm; min-height: 297mm; margin: 12px auto; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.15); }\n  .ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }\n  @page {\n    size: A4; margin: 0 0 14mm;\n    @bottom-center { content: \"Page \" counter(page, {{ page_digits }}) \" / \" counter(pages, {{ page_digits }}); font: 8.5px -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif; color: #94a3b8; }\n  }\n\n  .band { background: var(--accent); color: #fff; padding: 12mm 14mm 9mm; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }\n  .org { display: flex; align-items: center; gap: 14px; min-width: 0; }\n  .logo { max-height: 54px; max-width: 140px; object-fit: contain; background: #fff; border-radius: 8px; padding: 4px; }\n  .org-name { font-size: 20px; font-weight: 800; line-height: 1.2; }\n  .org-meta { font-size: 10px; opacity: .85; margin-top: 3px; }\n  .doc { text-align: end; flex: 0 0 auto; }\n  .doc .kind { font-size: 26px; font-weight: 800; letter-spacing: .5px; line-height: 1; }\n  .doc .no { margin-top: 6px; font-size: 13px; font-weight: 700; opacity: .95; }\n  .badge { display: inline-block; margin-top: 6px; padding: 1px 10px; border-radius: 999px; background: #fff; color: #b91c1c; font-size: 10px; font-weight: 800; }\n\n  .body { padding: 9mm 14mm 14mm; }\n  .cards { display: flex; gap: 12px; margin-bottom: 16px; }\n  .card { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }\n  .card .label { font-size: 9.5px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 4px; }\n  .card .name { font-size: 14px; font-weight: 700; }\n  .card .line { margin-top: 2px; color: var(--muted); }\n  .facts { width: 100%; border-collapse: collapse; }\n  .facts td { padding: 1px 0; vertical-align: top; }\n  .facts td.k { color: var(--muted); padding-inline-end: 10px; white-space: nowrap; }\n  .facts td.v { text-align: end; font-weight: 600; }\n\n  table.lines { width: 100%; border-collapse: separate; border-spacing: 0; }\n  table.lines thead { display: table-header-group; }\n  table.lines tr { break-inside: avoid; page-break-inside: avoid; }\n  table.lines th { background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; text-align: start; padding: 8px 9px; }\n  table.lines th:first-child { border-start-start-radius: 8px; border-end-start-radius: 8px; }\n  table.lines th:last-child { border-start-end-radius: 8px; border-end-end-radius: 8px; }\n  table.lines th.num { text-align: end; }\n  table.lines td { padding: 8px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }\n  table.lines tbody tr:nth-child(even) td { background: var(--zebra); }\n  .num { text-align: end; white-space: nowrap; }\n  .c-no { width: 8mm; color: var(--muted); }\n  .brand { font-size: 9.5px; font-weight: 700; color: var(--accent); }\n  .pn { font-weight: 600; }\n  .ln { font-size: 10px; color: var(--muted); white-space: pre-wrap; }\n\n  .closing { break-inside: avoid; page-break-inside: avoid; display: flex; gap: 16px; margin-top: 16px; align-items: flex-start; }\n  .aside { flex: 1; min-width: 0; }\n  .note { border-inline-start: 3px solid var(--accent); background: var(--zebra); border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; white-space: pre-wrap; }\n  .note .label, .acct .label { font-size: 9.5px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; }\n  .acct { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }\n  .acct table { width: 100%; border-collapse: collapse; }\n  .acct td { padding: 2px 0; }\n  .acct td.v { text-align: end; font-weight: 600; white-space: nowrap; }\n  .acct tr.new td { font-weight: 800; border-top: 1px solid var(--line); padding-top: 4px; }\n  .totals { width: 44%; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }\n  .totals table { width: 100%; border-collapse: collapse; }\n  .totals td { padding: 6px 12px; }\n  .totals td.v { text-align: end; font-weight: 600; white-space: nowrap; }\n  .totals td.k { color: var(--muted); }\n  .totals tr.grand td { background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; padding: 10px 12px; }\n  .totals tr.grand td.k { color: #fff; }\n  .totals tr.small td { font-size: 10.5px; background: var(--accent-soft); }\n\n  .signs { display: flex; gap: 40px; margin-top: 44px; break-inside: avoid; }\n  .signs .s { flex: 1; text-align: center; border-top: 1px dashed #94a3b8; padding-top: 5px; color: var(--muted); font-size: 10.5px; }\n  .thanks { margin-top: 22px; text-align: center; color: var(--accent); font-weight: 700; }\n  .stamp { margin-top: 4px; text-align: center; font-size: 9.5px; color: #94a3b8; }\n\n  @media print {\n    body { background: #fff; }\n    .sheet { margin: 0; width: auto; min-height: 0; box-shadow: none; }\n  }\n</style>\n</head>\n<body>\n<div class=\"sheet\">\n  <header class=\"band\">\n    <div class=\"org\">\n      {% if branch.logo != \"\" %}<img class=\"logo\" src=\"{{ branch.logo }}\" alt=\"\">{% endif %}\n      <div>\n        <div class=\"org-name\"><bdi>{{ org_name }}</bdi></div>\n        <div class=\"org-meta\">\n          {% if branch.address != \"\" %}{{ branch.address }}{% endif %}\n          {% if branch.phone1 != \"\" %} · <span class=\"ltr\">{{ branch.phone1 }}</span>{% endif %}\n          {% if branch.company_tax_number != \"\" %} · Tax No. <span class=\"ltr\">{{ branch.company_tax_number }}</span>{% endif %}\n        </div>\n      </div>\n    </div>\n    <div class=\"doc\">\n      <div class=\"kind\">Invoice</div>\n      <div class=\"no\"><span class=\"ltr\">{{ invoice.number }}</span></div>\n      {% case invoice.status %}{% when \"draft\" %}<span class=\"badge\">Draft</span>{% when \"canceled\" %}<span class=\"badge\">Canceled</span>{% endcase %}\n    </div>\n  </header>\n\n  <div class=\"body\">\n    <section class=\"cards\">\n      <div class=\"card\">\n        <div class=\"label\">Bill to</div>\n        <div class=\"name\"><bdi>{{ customer.name | default: invoice.customer_name | default: \"—\" }}</bdi></div>\n        {% if customer.phones.size > 0 %}<div class=\"line\">{% for p in customer.phones %}{% unless forloop.first %} · {% endunless %}<span class=\"ltr\">{{ p }}</span>{% endfor %}</div>{% endif %}\n        {% if invoice.delivery_address != \"\" %}<div class=\"line\">{{ invoice.delivery_address }}</div>{% endif %}\n      </div>\n      <div class=\"card\">\n        <table class=\"facts\">\n          <tr><td class=\"k\">Date</td><td class=\"v\"><span class=\"ltr\">{{ invoice.entry_date }}</span></td></tr>\n          {% if invoice.pay_by != \"\" and invoice.type != \"cash\" and invoice.type != \"online_cash\" %}<tr><td class=\"k\">Pay by</td><td class=\"v\"><span class=\"ltr\">{{ invoice.pay_by }}</span></td></tr>{% endif %}\n          <tr><td class=\"k\">Payment</td><td class=\"v\">{% case invoice.type %}{% when \"cash\" %}Cash{% when \"installment\" %}Installments{% when \"online_cash\" %}Online — cash{% when \"online_installment\" %}Online — installments{% when \"partner\" %}Partner (on account){% else %}{{ invoice.type }}{% endcase %}</td></tr>\n          <tr><td class=\"k\">Currency</td><td class=\"v\"><span class=\"ltr\">{{ invoice.currency }}</span></td></tr>\n          {% if invoice.branch_name != \"\" %}<tr><td class=\"k\">Branch</td><td class=\"v\">{{ invoice.branch_name }}</td></tr>{% endif %}\n        </table>\n      </div>\n    </section>\n\n    <table class=\"lines\">\n      <thead>\n        <tr><th class=\"c-no\">#</th><th>Item</th><th class=\"num\">Qty</th><th class=\"num\">Unit price</th><th class=\"num\">Amount</th></tr>\n      </thead>\n      <tbody>\n        {% for line in invoice.lines %}\n        <tr>\n          <td class=\"c-no\"><span class=\"ltr\">{{ line.no }}</span></td>\n          <td>\n            {% if line.brand != \"\" %}<div class=\"brand\"><bdi>{{ line.brand }}</bdi></div>{% endif %}\n            <div class=\"pn\"><bdi>{{ line.product_name | default: \"—\" }}</bdi></div>\n            {% if line.notes != \"\" %}<div class=\"ln\">{{ line.notes }}</div>{% endif %}\n          </td>\n          <td class=\"num\"><span class=\"ltr\">{{ line.qty }}</span></td>\n          <td class=\"num\"><span class=\"ltr\">{{ line.unit_price }}</span></td>\n          <td class=\"num\"><span class=\"ltr\">{{ line.line_total }}</span></td>\n        </tr>\n        {% endfor %}\n      </tbody>\n    </table>\n\n    <div class=\"closing\">\n      <div class=\"aside\">\n        {% if invoice.notes != \"\" %}<div class=\"note\"><div class=\"label\">Notes</div>{{ invoice.notes }}</div>{% endif %}\n        {% if balance.shown %}\n        <div class=\"acct\">\n          <div class=\"label\">Customer account</div>\n          <table>\n            <tr><td>Previous balance</td><td class=\"v\"><span class=\"ltr\">{{ balance.previous }} {{ invoice.currency }}</span></td></tr>\n            <tr><td>This invoice</td><td class=\"v\"><span class=\"ltr\">+ {{ invoice.final }} {{ invoice.currency }}</span></td></tr>\n            <tr class=\"new\"><td>New balance</td><td class=\"v\"><span class=\"ltr\">{{ balance.new }} {{ invoice.currency }}</span></td></tr>\n          </table>\n        </div>\n        {% endif %}\n      </div>\n      <div class=\"totals\">\n        <table>\n          <tr><td class=\"k\">Subtotal (<span class=\"ltr\">{{ invoice.total_qty }}</span>)</td><td class=\"v\"><span class=\"ltr\">{{ invoice.subtotal }}</span></td></tr>\n          {% if invoice.discount_raw != 0 %}<tr><td class=\"k\">Discount{% if invoice.discount_percent != \"0\" %} (<span class=\"ltr\">{{ invoice.discount_percent }}%</span>){% endif %}</td><td class=\"v\"><span class=\"ltr\">− {{ invoice.discount }}</span></td></tr>{% endif %}\n          {% if invoice.shipping_raw != 0 %}<tr><td class=\"k\">Shipping</td><td class=\"v\"><span class=\"ltr\">{{ invoice.shipping }}</span></td></tr>{% endif %}\n          {% if invoice.tax_raw != 0 %}<tr><td class=\"k\">Tax{% if invoice.tax_percentage != 0 %} (<span class=\"ltr\">{{ invoice.tax_percentage }}%</span>){% endif %}</td><td class=\"v\"><span class=\"ltr\">{{ invoice.tax }}</span></td></tr>{% endif %}\n          <tr class=\"grand\"><td class=\"k\">Total</td><td class=\"v\"><span class=\"ltr\">{{ invoice.final }} {{ invoice.currency }}</span></td></tr>\n          {% if invoice.down_payment_raw != 0 %}<tr class=\"small\"><td class=\"k\">Down payment</td><td class=\"v\"><span class=\"ltr\">{{ invoice.down_payment }}</span></td></tr>{% endif %}\n          {% if base_currency != \"\" and base_currency != invoice.currency and total_base_raw != 0 %}<tr class=\"small\"><td class=\"k\">Total (<span class=\"ltr\">{{ base_currency }}</span>)</td><td class=\"v\"><span class=\"ltr\">{{ total_base }}</span></td></tr>{% endif %}\n        </table>\n      </div>\n    </div>\n\n    <section class=\"signs\">\n      <div class=\"s\">Received by</div>\n      <div class=\"s\">Authorized signature</div>\n    </section>\n    <div class=\"thanks\">Thank you for your business.</div>\n    <div class=\"stamp\">Printed <span class=\"ltr\">{{ generated_at }}</span></div>\n  </div>\n</div>\n</body>\n</html>\n"
}