<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Commercial Invoice - {{ quote.id }} | MoldCost Pro</title>
    <style>
        :root {
            --primary-color: #1a365d;
            --secondary-color: #2c5282;
            --accent-color: #c53030;
        }

        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            color: #1a202c;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
        }

        .letterhead {
            border-bottom: 2px solid var(--primary-color);
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
        }

        .company-logo {
            height: 60px;
            margin-bottom: 1rem;
        }

        .legal-disclaimer {
            font-size: 0.75rem;
            color: #718096;
            margin-top: 3rem;
        }

        @media print {
            .page-break { page-break-before: always; }
        }
    </style>
</head>
<body>
    <div class="letterhead">
        <img src="https://cdn.example.com/logo.svg" 
             alt="MoldCost Pro" 
             class="company-logo">
        <div class="flex justify-between text-sm text-gray-600">
            <div>
                <p>MoldCost Pro Limited</p>
                <p>123 Manufacturing Blvd, Shenzhen, CN</p>
            </div>
            <div class="text-right">
                <p>T: +86 (755) 1234-5678</p>
                <p>E: sales@moldcostpro.com</p>
                <p>W: www.moldcostpro.com</p>
            </div>
        </div>
    </div>

    <div class="header-section">
        <h1 class="text-2xl font-bold">Commercial Invoice</h1>
        <div class="flex justify-between text-sm text-gray-600 mt-2">
            <div>
                <p><strong>Quote ID:</strong> MC-{{ quote.id|string|replace(' ', '0') }}</p>
                <p><strong>Date:</strong> {{ quote.created_at.strftime('%d-%b-%Y') }}</p>
            </div>
            <div>
                <p><strong>Currency:</strong> USD</p>
                <p><strong>Valid Until:</strong> {{ (quote.created_at + datetime.timedelta(days=30)).strftime('%d-%b-%Y') }}</p>
            </div>
        </div>
    </div>

    {% from "_quotation_details.html" import render_quotation_details %}
    {{ render_quotation_details(quote, show_actions=false) }}

    <div class="legal-disclaimer">
        <p>This quotation is subject to our standard terms and conditions. Prices valid for 30 days from quotation date. All measurements tolerances ±0.5% unless otherwise specified. Export documentation extra.</p>
    </div>
</body>
</html>
