<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facture {{ invoice_number }}</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .invoice { width: 80%; margin: auto; border: 1px solid #ddd; padding: 20px; }
        .header, .footer { text-align: center; }
        .customer-info, .items { margin-bottom: 20px; }
        .items table { width: 100%; border-collapse: collapse; }
        .items table, th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        .total { text-align: right; font-weight: bold; }
    </style>
</head>
<body>
    <div class="invoice">
        <div class="header">
            <h1>Facture {{ invoice_number }}</h1>
            <p>Date: {{ invoice_date }}</p>
        </div>
        <div class="customer-info">
            <h2>Informations Client</h2>
            <p>Nom: {{ customer_name }}</p>
            <p>Email: {{ customer_email }}</p>
            <p>Adresse: {{ customer_address }}</p>
        </div>
        <div class="items">
            <h2>Articles</h2>
            <table>
                <tr>
                    <th>Nom de l'article</th>
                    <th>Quantité</th>
                    <th>Prix unitaire</th>
                    <th>Total</th>
                </tr>
                {% for item in items %}
                <tr>
                    <td>{{ item.item_name }}</td>
                    <td>{{ item.quantity }}</td>
                    <td>{{ item.unit_price }}</td>
                    <td>{{ item.quantity * item.unit_price }}</td>
                </tr>
                {% endfor %}
            </table>
        </div>
        <div class="total">
            <p>Montant Total: {{ total_amount }}</p>
        </div>
        <div class="footer">
            <p>Merci pour votre achat!</p>
        </div>
    </div>
</body>
</html>
