<!DOCTYPE html>
<html>
<head>
    <style>
        /* === EMAIL STYLES ===
           Email clients have limited CSS support, so we use inline-friendly styles.
           Vendor name is the dominant element — no prominent Fox Fitt branding
           (Spark reads the vendor name from the document). */
        body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
        .container { max-width: 600px; margin: 0 auto; border: 1px solid #ddd; padding: 20px; }
        .header { text-align: center; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px; }
        .vendor-name { font-size: 24px; font-weight: bold; text-transform: uppercase; color: #000; }
        .sub-header { font-size: 14px; color: #666; margin-bottom: 5px; }
        .meta { margin-bottom: 20px; background-color: #f8f9fa; padding: 10px; border-radius: 4px; }
        .items-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
        .items-table th, .items-table td { border-bottom: 1px solid #eee; padding: 8px; text-align: left; }
        .items-table th { background-color: #f8f9fa; }
        .totals { text-align: right; margin-top: 20px; }
        .total-row { font-size: 18px; font-weight: bold; }
        .footer { margin-top: 30px; font-size: 12px; color: #777; text-align: center; border-top: 1px solid #eee; padding-top: 10px; }
    </style>
</head>
<body>
    <div class="container">
        <!-- Header: vendor name is the biggest element -->
        <div class="header">
            <div class="sub-header">RECEIPT FROM</div>
            <div class="vendor-name">{{ receipt.vendor_name }}</div>
        </div>

        <!-- Receipt details -->
        <div class="meta">
            <strong>Date:</strong> {{ receipt.date }}<br>
            <strong>Payment Method:</strong> {{ receipt.get_payment_method_display }}<br>
            <strong>Description:</strong> {{ receipt.description|default:"-" }}
        </div>

        <!-- Line items table -->
        <table class="items-table">
            <thead>
                <tr>
                    <th>Item</th>
                    <th style="text-align: right;">Amount</th>
                </tr>
            </thead>
            <tbody>
                {% for item in items %}
                <tr>
                    <td>{{ item.product_name }}</td>
                    <td style="text-align: right;">R {{ item.amount|floatformat:2 }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <!-- Totals -->
        <div class="totals">
            <p>Subtotal: R {{ receipt.subtotal|floatformat:2 }}</p>
            <p>VAT ({{ receipt.get_vat_type_display }}): R {{ receipt.vat_amount|floatformat:2 }}</p>
            <p class="total-row">Total: R {{ receipt.total_amount|floatformat:2 }}</p>
        </div>

        <!-- Footer — minimal branding -->
        <div class="footer">
            <p>Generated by {{ receipt.user.get_full_name|default:receipt.user.username }} via Fox Fitt App</p>
            <p>Date Generated: {% now "Y-m-d H:i" %}</p>
        </div>
    </div>
</body>
</html>
