<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rechnung ${invoiceData.invoiceNumber}</title>
    <style>
        @page {
            size: A4;
            margin: 2cm 1.5cm 2cm 1.5cm;
        }

        * {
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', 'Helvetica', sans-serif;
            font-size: 11pt;
            line-height: 1.4;
            color: #333;
            margin: 0;
            padding: 0;
            background: white;
        }

        .invoice-container {
            max-width: 21cm;
            margin: 0 auto;
            background: white;
            padding: 0;
        }

        /* Header Section */
        .header {
            display: table;
            width: 100%;
            margin-bottom: 3em;
            border-bottom: 2px solid #2c5aa0;
            padding-bottom: 1em;
        }

        .header-left {
            display: table-cell;
            width: 60%;
            vertical-align: top;
        }

        .header-right {
            display: table-cell;
            width: 40%;
            vertical-align: top;
            text-align: right;
        }

        .company-logo {
            font-size: 24pt;
            font-weight: bold;
            color: #2c5aa0;
            margin-bottom: 0.5em;
        }

        .company-details {
            font-size: 9pt;
            color: #666;
            line-height: 1.3;
        }

        .invoice-title {
            font-size: 18pt;
            font-weight: bold;
            color: #2c5aa0;
            margin-bottom: 0.3em;
        }

        .invoice-meta {
            font-size: 10pt;
            line-height: 1.4;
        }

        /* Recipient Section */
        .recipient-section {
            margin-bottom: 2.5em;
        }

        .sender-short {
            font-size: 8pt;
            color: #666;
            border-bottom: 1px solid #ccc;
            padding-bottom: 2pt;
            margin-bottom: 1em;
        }

        .recipient-address {
            font-size: 11pt;
            line-height: 1.4;
        }

        .recipient-address .company {
            font-weight: bold;
        }

        /* Invoice Details */
        .invoice-details {
            display: table;
            width: 100%;
            margin-bottom: 2em;
            font-size: 10pt;
        }

        .invoice-details-left {
            display: table-cell;
            width: 50%;
            vertical-align: top;
        }

        .invoice-details-right {
            display: table-cell;
            width: 50%;
            vertical-align: top;
            text-align: right;
        }

        .detail-row {
            margin-bottom: 0.3em;
        }

        .detail-label {
            font-weight: bold;
            display: inline-block;
            width: 120px;
        }

        /* Items Table */
        .items-section {
            margin-bottom: 2em;
        }

        .items-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 10pt;
            margin-bottom: 1em;
        }

        .items-table th {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 8pt;
            text-align: left;
            font-weight: bold;
            color: #2c5aa0;
        }

        .items-table td {
            border: 1px solid #dee2e6;
            padding: 6pt 8pt;
            vertical-align: top;
        }

        .items-table tbody tr:nth-child(even) {
            background-color: #f8f9fa;
        }

        .items-table .qty-col {
            width: 10%;
            text-align: center;
        }

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

        .items-table .price-col {
            width: 20%;
            text-align: right;
        }

        .items-table .total-col {
            width: 20%;
            text-align: right;
        }

        /* Totals Section */
        .totals-section {
            display: table;
            width: 100%;
            margin-bottom: 2em;
        }

        .totals-left {
            display: table-cell;
            width: 60%;
            vertical-align: top;
        }

        .totals-right {
            display: table-cell;
            width: 40%;
            vertical-align: top;
        }

        .totals-table {
            width: 100%;
            font-size: 11pt;
        }

        .totals-table td {
            padding: 4pt 8pt;
            border: none;
        }

        .totals-table .label-col {
            text-align: right;
            width: 70%;
            border-bottom: 1px solid #eee;
        }

        .totals-table .amount-col {
            text-align: right;
            width: 30%;
            font-weight: bold;
            border-bottom: 1px solid #eee;
        }

        .totals-table .total-row .label-col,
        .totals-table .total-row .amount-col {
            background-color: #2c5aa0;
            color: white;
            font-weight: bold;
            border: none;
        }

        /* Payment Section */
        .payment-section {
            margin-bottom: 2em;
            font-size: 10pt;
        }

        .payment-terms {
            background-color: #f8f9fa;
            padding: 1em;
            border-left: 4px solid #2c5aa0;
            margin-bottom: 1em;
        }

        .bank-details {
            display: table;
            width: 100%;
        }

        .bank-details-left {
            display: table-cell;
            width: 50%;
            vertical-align: top;
        }

        .bank-details-right {
            display: table-cell;
            width: 50%;
            vertical-align: top;
        }

        /* Legal Footer */
        .legal-footer {
            border-top: 1px solid #dee2e6;
            padding-top: 1em;
            font-size: 8pt;
            color: #666;
            text-align: center;
            line-height: 1.3;
        }

        /* Utility Classes */
        .text-right {
            text-align: right;
        }

        .text-center {
            text-align: center;
        }

        .font-bold {
            font-weight: bold;
        }

        .mb-1 {
            margin-bottom: 0.5em;
        }

        .mb-2 {
            margin-bottom: 1em;
        }

        /* Print Styles */
        @media print {
            body {
                font-size: 10pt;
            }

            .invoice-container {
                max-width: none;
                margin: 0;
                padding: 0;
            }

            .header {
                page-break-after: avoid;
            }

            .items-table {
                page-break-inside: avoid;
            }

            .totals-section {
                page-break-inside: avoid;
            }
        }
    </style>
</head>
<body>
    <div class="invoice-container">
        <!-- Header Section -->
        <div class="header">
            <div class="header-left">
                <div class="company-logo">${invoiceData.senderName}</div>
                <div class="company-details">
                    ${invoiceData.senderAddress}<br>
                    ${invoiceData.senderPostcode} ${invoiceData.senderCity}<br>
                    ${invoiceData.senderCountry}<br>
                    <br>
                    Tel: ${invoiceData.senderPhone}<br>
                    E-Mail: ${invoiceData.senderEmail}<br>
                    Web: ${invoiceData.senderWebsite}<br>
                    <br>
                    Steuernr.: ${invoiceData.senderTaxNumber}<br>
                    USt-IdNr.: ${invoiceData.senderVatId}
                </div>
            </div>
            <div class="header-right">
                <div class="invoice-title">RECHNUNG</div>
                <div class="invoice-meta">
                    <strong>Nr. ${invoiceData.invoiceNumber}</strong><br>
                    vom ${invoiceData.invoiceDate}
                </div>
            </div>
        </div>

        <!-- Recipient Section -->
        <div class="recipient-section">
            <div class="sender-short">
                ${invoiceData.senderName} · ${invoiceData.senderAddress} · ${invoiceData.senderPostcode} ${invoiceData.senderCity}
            </div>
            <div class="recipient-address">
                <div class="company">${invoiceData.recipientCompany}</div>
                <div>${invoiceData.recipientName}</div>
                <div>${invoiceData.recipientAddress}</div>
                <div>${invoiceData.recipientPostcode} ${invoiceData.recipientCity}</div>
                <div>${invoiceData.recipientCountry}</div>
            </div>
        </div>

        <!-- Invoice Details -->
        <div class="invoice-details">
            <div class="invoice-details-left">
                <div class="detail-row">
                    <span class="detail-label">Rechnungsdatum:</span>
                    ${invoiceData.invoiceDate}
                </div>
                <div class="detail-row">
                    <span class="detail-label">Leistungsdatum:</span>
                    ${invoiceData.deliveryDate}
                </div>
                <div class="detail-row">
                    <span class="detail-label">Kundennummer:</span>
                    ${invoiceData.recipientVatId}
                </div>
            </div>
            <div class="invoice-details-right">
                <div class="detail-row">
                    <span class="detail-label">Fälligkeitsdatum:</span>
                    ${invoiceData.paymentDueDate}
                </div>
                <div class="detail-row">
                    <span class="detail-label">Zahlungsziel:</span>
                    14 Tage netto
                </div>
            </div>
        </div>

        <!-- Description -->
        <div class="mb-2">
            <strong>Leistungsbeschreibung:</strong><br>
            ${invoiceData.description}
        </div>

        <!-- Items Table -->
        <div class="items-section">
            <table class="items-table">
                <thead>
                    <tr>
                        <th class="qty-col">Menge</th>
                        <th class="desc-col">Beschreibung</th>
                        <th class="price-col">Einzelpreis<br>(netto)</th>
                        <th class="total-col">Gesamtpreis<br>(netto)</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- ITEM_ROWS -->
                </tbody>
            </table>
        </div>

        <!-- Totals Section -->
        <div class="totals-section">
            <div class="totals-left">
                <!-- Space for additional notes if needed -->
            </div>
            <div class="totals-right">
                <table class="totals-table">
                    <tr>
                        <td class="label-col">Nettobetrag:</td>
                        <td class="amount-col">${invoiceData.netAmount}</td>
                    </tr>
                    <tr class="total-row">
                        <td class="label-col">Rechnungsbetrag:</td>
                        <td class="amount-col">${invoiceData.totalAmount}</td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- Payment Section -->
        <div class="payment-section">
            <div class="payment-terms">
                <strong>Zahlungsbedingungen:</strong><br>
                ${invoiceData.paymentTerms}
                Fälligkeitsdatum: ${invoiceData.paymentDueDate}
            </div>

            <div class="bank-details">
                <div class="bank-details-left">
                    <strong>Bankverbindung:</strong><br>
                    ${invoiceData.bankAccount}<br>
                    IBAN: ${invoiceData.iban}<br>
                    BIC: ${invoiceData.bic}
                </div>
                <div class="bank-details-right">
                    <strong>Verwendungszweck:</strong><br>
                    Rechnung ${invoiceData.invoiceNumber}
                </div>
            </div>
        </div>

        <!-- Legal Footer -->
        <div class="legal-footer">
            ${invoiceData.legalNotes}<br>
            <br>
            Vielen Dank für Ihr Vertrauen!<br>
            Bei Fragen zu dieser Rechnung wenden Sie sich bitte an: ${invoiceData.senderEmail}
        </div>
    </div>
</body>
</html>
