{% extends "email_sender/base_email.html" %}
{% load i18n %}
{% block title %}{% translate 'Appointment Reminder' %}{% endblock %}
{% block preheader %}{{ appointment.get_service_name }} · {{ appointment.appointment_request.date|date:"l, d F Y" }} · {{ appointment.appointment_request.start_time|time }}{% endblock %}
{% block heading %}{% translate 'Appointment Reminder' %}{% endblock %}

{% block content %}
    <p style="margin: 0 0 12px;">
        {% if recipient_type == 'client' %}
            {% if first_name %}{% blocktranslate trimmed %}Dear {{ first_name }},{% endblocktranslate %}{% else %}{% translate 'Hi' %},{% endif %}
        {% else %}
            {% translate 'Dear Administrator,' %}
        {% endif %}
    </p>
    <p style="margin: 0 0 24px;">{% translate 'This is a reminder for your upcoming appointment.' %}</p>

    <h2 style="margin: 0 0 10px; font-size: 16px; font-weight: 700; color: #0c1b33;">{% translate 'Appointment Details' %}</h2>
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 0 0 24px; border: 1px solid #e3e8ef; border-radius: 8px; border-collapse: separate;">
        <tr>
            <td valign="top" style="padding: 10px 14px; width: 40%; font-size: 14px; color: #64748b; border-bottom: 1px solid #e3e8ef;">{% translate 'Service' %}</td>
            <td valign="top" style="padding: 10px 14px; font-size: 14px; font-weight: 600; border-bottom: 1px solid #e3e8ef;">{{ appointment.get_service_name }}</td>
        </tr>
        <tr>
            <td valign="top" style="padding: 10px 14px; font-size: 14px; color: #64748b; border-bottom: 1px solid #e3e8ef;">{% translate 'Date' %}</td>
            <td valign="top" style="padding: 10px 14px; font-size: 14px; font-weight: 600; border-bottom: 1px solid #e3e8ef;">{{ appointment.appointment_request.date|date:"l, d F Y" }}</td>
        </tr>
        <tr>
            <td valign="top" style="padding: 10px 14px; font-size: 14px; color: #64748b;{% if appointment.address %} border-bottom: 1px solid #e3e8ef;{% endif %}">{% translate 'Time' %}</td>
            <td valign="top" style="padding: 10px 14px; font-size: 14px; font-weight: 600;{% if appointment.address %} border-bottom: 1px solid #e3e8ef;{% endif %}">{{ appointment.appointment_request.start_time|time }} – {{ appointment.appointment_request.end_time|time }}</td>
        </tr>
        {% if appointment.address %}
            <tr>
                <td valign="top" style="padding: 10px 14px; font-size: 14px; color: #64748b;">{% translate 'Location' %}</td>
                <td valign="top" style="padding: 10px 14px; font-size: 14px; font-weight: 600;">{{ appointment.address }}</td>
            </tr>
        {% endif %}
    </table>

    {% if recipient_type == 'client' %}
        <p style="margin: 0 0 12px;">{% translate 'If you need to reschedule, please click the button below or contact us for further assistance.' %}</p>
        {% if reschedule_link %}
            <p style="margin: 0 0 24px;">
                <a href="{{ reschedule_link }}" style="display: inline-block; padding: 12px 22px; background-color: #00307c; border-radius: 8px; font-weight: 600; color: #ffffff; text-decoration: none;">{% translate 'Reschedule Appointment' %}</a>
            </p>
        {% endif %}
        <p style="margin: 0;">{% translate 'Thank you for choosing us!' %}</p>
    {% else %}
        <p style="margin: 0;">{% translate 'Please ensure the appointment setup is complete and ready for the client.' %}</p>
    {% endif %}
{% endblock %}