<!doctype html>
<html lang="{{lang}}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{documentTitle}} {{invoiceNumber}}</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
      color: #1f2937;
      background: #ffffff;
      font-size: 13px;
      line-height: 1.5;
    }

    .page {
      max-width: 800px;
      margin: 0 auto;
      padding: 40px 48px;
    }

    /* ── Header ────────────────────────────────── */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 40px;
      padding-bottom: 20px;
      border-bottom: 3px solid #1C2B4A;
    }
    .header-left { flex: 1; }
    .company-name {
      font-size: 26px;
      font-weight: 800;
      color: #1C2B4A;
      letter-spacing: -0.5px;
    }
    .company-sub {
      font-size: 11px;
      color: #6b7280;
      margin-top: 2px;
    }
    .header-right {
      text-align: right;
    }
    .invoice-badge {
      display: inline-block;
      background: #1C2B4A;
      color: #ffffff;
      font-size: 18px;
      font-weight: 700;
      padding: 8px 20px;
      border-radius: 6px;
      letter-spacing: 0.5px;
    }
    .invoice-number-label {
      margin-top: 8px;
      font-size: 12px;
      color: #6b7280;
    }
    .invoice-number-value {
      font-size: 15px;
      font-weight: 700;
      color: #1C2B4A;
    }

    /* ── Meta Grid ─────────────────────────────── */
    .meta-grid {
      display: flex;
      justify-content: space-between;
      margin-bottom: 36px;
      gap: 24px;
    }
    .meta-block {
      flex: 1;
    }
    .meta-block h3 {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #9ca3af;
      margin-bottom: 6px;
    }
    .meta-block p {
      font-size: 13px;
      color: #1f2937;
      line-height: 1.6;
    }
    .meta-block .highlight {
      font-weight: 700;
      color: #1C2B4A;
    }

    /* ── Items Table ───────────────────────────── */
    .items-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 24px;
    }
    .items-table thead th {
      background: #1C2B4A;
      color: #ffffff;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      padding: 10px 14px;
      text-align: left;
    }
    .items-table thead th:last-child,
    .items-table thead th:nth-child(3),
    .items-table thead th:nth-child(4),
    .items-table thead th:nth-child(5) {
      text-align: right;
    }
    .items-table tbody td {
      padding: 10px 14px;
      border-bottom: 1px solid #e5e7eb;
      font-size: 13px;
    }
    .items-table tbody td:last-child,
    .items-table tbody td:nth-child(3),
    .items-table tbody td:nth-child(4),
    .items-table tbody td:nth-child(5) {
      text-align: right;
    }
    .items-table tbody tr:nth-child(even) {
      background: #f9fafb;
    }
    .items-table tbody tr:last-child td {
      border-bottom: 2px solid #1C2B4A;
    }

    /* ── Totals ────────────────────────────────── */
    .totals {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 36px;
    }
    .totals-box {
      width: 280px;
    }
    .totals-row {
      display: flex;
      justify-content: space-between;
      padding: 6px 0;
      font-size: 13px;
      color: #4b5563;
    }
    .totals-row.total-gross {
      border-top: 2px solid #1C2B4A;
      margin-top: 6px;
      padding-top: 10px;
      font-size: 16px;
      font-weight: 800;
      color: #1C2B4A;
    }
    .reverse-charge-note {
      background: #fff7ed;
      border: 1px solid #fdba74;
      border-radius: 8px;
      padding: 16px 18px;
      margin-bottom: 24px;
    }
    .reverse-charge-note p {
      font-size: 12px;
      color: #9a3412;
      line-height: 1.7;
    }
    .is-hidden {
      display: none !important;
    }

    /* ── Payment Info ──────────────────────────── */
    .payment-info {
      background: #f0f4fa;
      border-radius: 8px;
      padding: 18px 20px;
      margin-bottom: 36px;
    }
    .payment-info h3 {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #1C2B4A;
      margin-bottom: 8px;
    }
    .payment-info p {
      font-size: 12px;
      color: #374151;
      line-height: 1.6;
    }

    .payment-grid {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: flex-start;
    }
    .payment-text {
      flex: 1;
      min-width: 0;
    }
    .payment-qr {
      flex: 0 0 auto;
      width: 170px;
      text-align: right;
    }
    .payment-qr img {
      width: 160px;
      height: 160px;
      object-fit: contain;
      display: inline-block;
      background: #ffffff;
      border-radius: 6px;
      padding: 6px;
    }

    @media (max-width: 560px) {
      .payment-grid {
        flex-direction: column;
      }
      .payment-qr {
        width: auto;
        text-align: left;
      }
    }

    /* ── Footer ────────────────────────────────── */
    .footer {
      border-top: 1px solid #e5e7eb;
      padding-top: 16px;
      text-align: center;
      font-size: 11px;
      color: #9ca3af;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="page">
    <!-- Header -->
    <div class="header">
      <div class="header-left">
        <div class="company-name">Profit Planet GmbH</div>
        <div class="company-sub">Coffee Subscription Service</div>
      </div>
      <div class="header-right">
        <div class="invoice-badge">{{documentTitle}}</div>
        <div class="invoice-number-label">{{invoiceNumberLabel}}</div>
        <div class="invoice-number-value">{{invoiceNumber}}</div>
      </div>
    </div>

    <!-- Meta Grid: From / To / Details -->
    <div class="meta-grid">
      <div class="meta-block">
        <h3>{{fromLabel}}</h3>
        <p>
          <span class="highlight">Profit Planet GmbH</span><br>
          Kärntner Straße 227<br>
          8053 Graz
        </p>
      </div>
      <div class="meta-block">
        <h3>{{toLabel}}</h3>
        <p>
          <span class="highlight">{{customerName}}</span><br>
          {{customerEmail}}<br>
          {{customerStreet}}<br>
          {{customerPostalCity}}<br>
          {{customerCountry}}
        </p>
      </div>
      {{orderedByBlock}}
      <div class="meta-block">
        <h3>{{detailsLabel}}</h3>
        <p>
          {{dateLabel}}: <span class="highlight">{{issuedAt}}</span><br>
          {{dueDateLabel}}: <span class="highlight">{{dueAt}}</span><br>
          {{statusLabel}}: <span class="highlight">{{invoiceStatus}}</span>
        </p>
      </div>
    </div>

    <!-- Items Table -->
    <table class="items-table">
      <thead>
        <tr>
          <th>#</th>
          <th>{{descriptionHeader}}</th>
          <th>{{qtyHeader}}</th>
          <th>{{unitPriceHeader}}</th>
          <th>{{totalHeader}}</th>
        </tr>
      </thead>
      <tbody>
        {{itemsRows}}
      </tbody>
    </table>

    <!-- Totals -->
    <div class="totals">
      <div class="totals-box">
        <div class="totals-row">
          <span>{{subtotalLabel}}</span>
          <span>{{totalNet}}</span>
        </div>
        <div class="totals-row">
          <span>{{taxLabel}} ({{vatRateDisplay}})</span>
          <span>{{totalTax}}</span>
        </div>
        <div class="totals-row total-gross">
          <span>{{totalLabel}}</span>
          <span>{{totalGross}}</span>
        </div>
      </div>
    </div>

    <div class="reverse-charge-note {{reverseChargeClass}} {{reverseChargeSectionClass}}">
      <p>{{reverseChargeNoticeText}}</p>
    </div>

    <!-- Payment Info -->
    <div class="payment-info">
      <h3>PAYMENT INFORMATION</h3>
      <div class="payment-grid">
        <div class="payment-text">
          <p>
            <strong>Profit Planet GmbH</strong><br>
            AT16 2081 5000 4639 9507<br>
            STSPAT2GXXX
          </p>
          <p>
            Please use the Invoice number as a reference when making the payment.
          </p>
        </div>
        {% comment %} <div class="payment-qr">{{qrCodeImage}}</div> {% endcomment %}
      </div>
    </div>

    <!-- Footer -->
    <div class="footer">
      {{footerText}}
    </div>
  </div>
</body>
</html>
