{% extends "email_sender/base_email.html" %}
{% load i18n %}
{% block title %}{% trans "Appointment Reschedule" %}{% endblock %}
{% block preheader %}{{ old_date|date:"l, d F Y" }} → {{ reschedule_date|date:"l, d F Y" }}{% endblock %}
{% block heading %}{% trans "Appointment Reschedule" %}{% endblock %}

{% block content %}
    {% if is_confirmation %}
        <p style="margin: 0 0 12px;">{% if first_name %}{% blocktrans trimmed %}Dear {{ first_name }},{% endblocktrans %}{% else %}{% trans "Hi" %},{% endif %}</p>
        <p style="margin: 0 0 24px;">{% trans "You have requested to reschedule your appointment. Please review the changes below and confirm:" %}</p>
    {% else %}
        <p style="margin: 0 0 12px;">{% trans "Hi" %},</p>
        <p style="margin: 0 0 24px;">
            {% blocktrans trimmed %}
                An appointment with {{ client_name }} for the service {{ service_name }} has been
                rescheduled.
            {% endblocktrans %}
        </p>
        {% if reason_for_rescheduling %}
            <p style="margin: -12px 0 24px; padding: 12px 14px; background-color: #f4f6fa; border-radius: 8px;">
                <b>{% trans "Reason for rescheduling:" %}</b> {{ reason_for_rescheduling }}
            </p>
        {% endif %}
    {% endif %}

    {# The old and the new time side by side (one under the other on narrow screens) #}
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0 0 24px;">
        <tr>
            <td valign="top" width="50%" style="padding: 0 6px 12px 0;">
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="border: 1px solid #e3e8ef; border-radius: 8px; border-collapse: separate;">
                    <tr>
                        <td style="padding: 12px 14px; font-size: 14px; color: #64748b;">
                            <div style="margin-bottom: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;">{% trans "Original Appointment:" %}</div>
                            <div style="text-decoration: line-through;">{{ old_date|date:"l, d F Y" }}</div>
                            <div style="text-decoration: line-through;">{{ old_start_time|time }} – {{ old_end_time|time }}</div>
                        </td>
                    </tr>
                </table>
            </td>
            <td valign="top" width="50%" style="padding: 0 0 12px 6px;">
                <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="border: 1px solid #00307c; border-radius: 8px; border-collapse: separate; background-color: #e6ebf3;">
                    <tr>
                        <td style="padding: 12px 14px; font-size: 14px; color: #0c1b33;">
                            <div style="margin-bottom: 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #00307c;">{% trans "Rescheduled Appointment:" %}</div>
                            <div style="font-weight: 600;">{{ reschedule_date|date:"l, d F Y" }}</div>
                            <div style="font-weight: 600;">{{ start_time|time }} – {{ end_time|time }}</div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    {% if is_confirmation %}
        <p style="margin: 0 0 16px;">
            <a href="{{ confirmation_link }}" style="display: inline-block; padding: 12px 22px; background-color: #00307c; border-radius: 8px; font-weight: 600; color: #ffffff; text-decoration: none;">{% trans "Confirm Appointment" %}</a>
        </p>
        <p style="margin: 0 0 16px; font-size: 14px; color: #33415c;">
            {% trans "This link will expire in 5 minutes. If you do not confirm within this time frame, you will need to submit a new reschedule request." %}
        </p>
        <p style="margin: 0 0 24px; font-size: 13px; color: #64748b;">
            {% trans "If the button above does not work, please copy and paste the following link into your browser:" %}<br>
            <a href="{{ confirmation_link }}" style="color: #00307c; word-break: break-all;">{{ confirmation_link }}</a>
        </p>
    {% endif %}

    <p style="margin: 0;">{% trans "Thank you," %}<br>{{ company }}</p>
{% endblock %}