{% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            margin: 0;
            padding: 0;
        }

        .email-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 4px;
        }

        .header {
            text-align: center;
            padding: 20px;
        }

        .header h1 {
            font-size: 24px;
            color: #333333;
            margin: 0;
        }

        .content {
            padding: 20px;
            line-height: 1.5;
            color: #333333;
        }

        .footer {
            text-align: center;
            padding: 20px;
            font-size: 12px;
            color: #999999;
        }
    </style>
</head>
<body>
<div class="email-container">
    <div class="header">
        <h1>{% trans "Your booking session request has been accepted" %}!</h1>
    </div>
    <div class="content">
        <p>{% trans "Hello" %} {{ first_name }},</p>
        <p>
            {{ message }}
        </p>
        {% if appointment_details %}
            <div class="main-content">
                <p class="appointment-details-title">{% trans "Appointment Details" %}:</p>
                <ul class="appointment-details">
                    {% for key, value in appointment_details.items %}
                        <li>{{ key }}: {{ value }}</li>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}
        <p>
            {% blocktranslate %}
                If you have any questions or need assistance, please don't hesitate to reach out to our support team.
            {% endblocktranslate %}
        </p>
        <p>{% trans "Best regards" %},</p>
        <p>{% trans "The Team" %}</p>
    </div>
    <div class="footer">
        &copy; {{ current_year }} {{ company }}. {% trans "All rights reserved" %}.
    </div>
</div>
</body>
</html>
