<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quote Rejected</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: #e74c3c; color: #fff; padding: 20px; border-radius: 5px; margin-bottom: 20px;">
        <h1 style="margin-top: 0;">Quote Rejected</h1>
    </div>
    
    <div style="background-color: #fff; padding: 20px; border-radius: 5px; border: 1px solid #ddd;">
        <p>The client has rejected 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>Rejected Date:</strong> {{ quote.rejected_at|user_datetime if quote.rejected_at else 'N/A' }}</li>
            </ul>
        </div>
        
        {% if reason %}
        <div style="background-color: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; margin: 20px 0;">
            <p><strong>Reason provided by client:</strong></p>
            <p style="white-space: pre-line;">{{ reason }}</p>
        </div>
        {% endif %}
        
        <p>You may want to follow up with the client to discuss alternatives or modifications.</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>
