{% extends 'emails/layouts/base.html' %}
{% load i18n %}

{% block email_subject %}
    {% if object_type == 'bonus' %}
        {% translate "email.bonus-credits.subject" %}
    {% else %}
        {% translate "email.credits.subject" %}
    {% endif %}
{% endblock %}

{% block email_content %}
    <p style="margin-bottom: 15px;">{% translate "email.greeting" %} {{ customer.user.get_full_name }},</p>

    {% if object_type == 'bonus' %}
        <p style="margin-bottom: 15px;">{% translate "email.bonus-credits.message" %}</p>
        <div style="background-color: #f8f9fa; padding: 15px; margin: 20px 0;">
            <h3 style="margin-top: 0; color: #333;">{% translate "email.bonus-credits.title" %}</h3>

            <div style="margin-bottom: 15px;">
                <img src="{{ plan_image_url }}" alt="{% translate 'email.bonus-credits.title' %}" style="max-width: 200px; height: auto;">
            </div>

            <p style="margin-bottom: 5px;"><strong>{% translate "email.bonus-credits.amount" %}:</strong> {{ credits_amount }}</p>
        </div>
    {% else %}
        <p style="margin-bottom: 15px;">{% translate "email.credits.message" %}</p>
        <div style="background-color: #f8f9fa; padding: 15px; margin: 20px 0; text-align: center; ">
            {% if plan %}
                <h3 style="margin-top: 0; color: #333;">{{ plan.name }}</h3>
            {% else %}
                <h3 style="margin-top: 0; color: #333;">{% translate "email.credits.title" %}</h3>
            {% endif %}

            {% if plan_image_url %}
                <div style="margin-bottom: 15px;">
                    <img src="{{ plan_image_url }}" alt="{{ plan.name|default:_('email.credits.title') }}" style="max-width: 200px; height: auto;">
                </div>
            {% endif %}

            {% if plan and bonus_amount > 0 %}
                <p style="margin-bottom: 5px;"><strong>{% translate "email.credits.main-credits" %}:</strong> {{ credits_amount }}</p>
                <p style="margin-bottom: 5px;"><strong>{% translate "email.credits.bonus-credits" %}:</strong> {{ bonus_amount }}</p>
                <p style="margin-bottom: 0;"><strong>{% translate "email.credits.total-credits" %}:</strong> {{ total_credits }}</p>
            {% else %}
                <p style="margin-bottom: 0;"><strong>{% translate "email.credits.amount" %}:</strong> {{ credits_amount }}</p>
            {% endif %}
        </div>
    {% endif %}

    <p style="text-align: center; margin-bottom: 15px;">{% translate "email.credits.enjoy-message" %}</p>

    <div style="text-align: center; margin: 25px 0;">
        <a href="{{ profile_url }}" style="background-color: #28a745; color: white; padding: 10px 20px; text-decoration: none; border-radius: 4px; font-weight: bold;">
            {% translate "email.credits.view-button" %}
        </a>
    </div>

    <p style="text-align: center; margin-top: 20px;">{% translate "email.credits.thank-you" %}</p>
{% endblock %}