<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quote Accepted</title>
</head>
<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333; max-width: 600px; margin: 0 auto; padding: 20px;">
    <div style="background-color: #27ae60; color: #fff; padding: 20px; border-radius: 5px; margin-bottom: 20px;">
        <h1 style="margin-top: 0;">Quote Accepted</h1>
    </div>
    
    <div style="background-color: #fff; padding: 20px; border-radius: 5px; border: 1px solid #ddd;">
        <p>Good news! The client has accepted quote <strong>{{ quote.quote_number }}</strong>.</p>
        
        <div style="background-color: #f9f9f9; padding: 15px; border-radius: 5px; margin: 20px 0;">
            <p><strong>Quote Details:</strong></p>
            <ul style="margin: 10px 0; padding-left: 20px;">
                <li><strong>Quote Number:</strong> {{ quote.quote_number }}</li>
                <li><strong>Client:</strong> {{ client.name }}</li>
                <li><strong>Title:</strong> {{ quote.title }}</li>
                <li><strong>Total Amount:</strong> {{ "%.2f"|format(quote.total_amount) }} {{ quote.currency_code }}</li>
                <li><strong>Accepted Date:</strong> {{ quote.accepted_at|user_datetime if quote.accepted_at else 'N/A' }}</li>
            </ul>
        </div>
        
        <p>You can now proceed with creating a project from this quote.</p>
    </div>
    
    <div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid #ddd; font-size: 12px; color: #777;">
        <p>This is an automated notification from TimeTracker.</p>
    </div>
</body>
</html>
