{% load i18n %}
{% extends 'emails/base_email_template.html' %}

{% block title %}{% trans "Appointment Confirmation - Al Hammadi Hospital" %}{% endblock %}

{% block preheader %}{% trans "Your appointment has been confirmed. Please review the details." %}{% endblock %}

{% block hero_title %}{% trans "Appointment Confirmed" %}{% endblock %}

{% block hero_subtitle %}{% trans "Your healthcare appointment at Al Hammadi Hospital has been successfully scheduled" %}{% endblock %}

{% block content %}
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td style="padding-bottom: 20px;">
            <p style="margin: 0; font-size: 16px; color: #1e293b; line-height: 1.6;">
                {% trans "Dear" %} <strong>{{ patient_name|default:_("Valued Patient") }}</strong>,
            </p>
            <p style="margin: 15px 0 0 0; font-size: 16px; color: #64748b; line-height: 1.6;">
                {% trans "Your appointment has been confirmed. Please find the details below and save this email for your records." %}
            </p>
        </td>
    </tr>
</table>

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 25px 0; background-color: #eef6fb; border-radius: 8px; border: 1px solid #cbd5e1;">
    <tr>
        <td style="padding: 25px;">
            <h3 style="margin: 0 0 20px 0; font-size: 18px; font-weight: 600; color: #005696; text-align: center;">
                {% trans "Appointment Details" %}
            </h3>
            
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 15px;">
                <tr>
                    <td width="120" style="padding-bottom: 10px; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Patient Name:" %}
                    </td>
                    <td style="padding-bottom: 10px; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ patient_name|default:_("N/A") }}
                    </td>
                </tr>
                <tr>
                    <td style="padding-bottom: 10px; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Appointment ID:" %}
                    </td>
                    <td style="padding-bottom: 10px; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ appointment_id|default:_("N/A") }}
                    </td>
                </tr>
                <tr>
                    <td style="padding-bottom: 10px; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Date:" %}
                    </td>
                    <td style="padding-bottom: 10px; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ appointment_date|default:_("N/A") }}
                    </td>
                </tr>
                <tr>
                    <td style="padding-bottom: 10px; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Time:" %}
                    </td>
                    <td style="padding-bottom: 10px; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ appointment_time|default:_("N/A") }}
                    </td>
                </tr>
                <tr>
                    <td style="padding-bottom: 10px; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Department:" %}
                    </td>
                    <td style="padding-bottom: 10px; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ department|default:_("N/A") }}
                    </td>
                </tr>
                <tr>
                    <td style="padding-bottom: 10px; font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Doctor:" %}
                    </td>
                    <td style="padding-bottom: 10px; font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ doctor_name|default:_("N/A") }}
                    </td>
                </tr>
                <tr>
                    <td style="font-size: 14px; color: #64748b; font-weight: 500;">
                        {% trans "Location:" %}
                    </td>
                    <td style="font-size: 14px; color: #1e293b; font-weight: 600;">
                        {{ location|default:_("Al Hammadi Hospital") }}
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td>
            <h3 style="margin: 0 0 15px 0; font-size: 18px; font-weight: 600; color: #005696;">
                {% trans "Important Reminders:" %}
            </h3>
        </td>
    </tr>
    <tr>
        <td>
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 12px;">
                <tr>
                    <td width="40" valign="top" style="padding-right: 10px;">
                        <span style="display: inline-block; width: 32px; height: 32px; background-color: #eef6fb; border-radius: 50%; text-align: center; line-height: 32px; font-size: 18px;">📋</span>
                    </td>
                    <td>
                        <p style="margin: 0; font-size: 15px; color: #1e293b; line-height: 1.5;">
                            <strong>{% trans "Arrive Early:" %}</strong> {% trans "Please arrive 15 minutes before your appointment time for registration" %}
                        </p>
                    </td>
                </tr>
            </table>
            
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin-bottom: 12px;">
                <tr>
                    <td width="40" valign="top" style="padding-right: 10px;">
                        <span style="display: inline-block; width: 32px; height: 32px; background-color: #eef6fb; border-radius: 50%; text-align: center; line-height: 32px; font-size: 18px;">📄</span>
                    </td>
                    <td>
                        <p style="margin: 0; font-size: 15px; color: #1e293b; line-height: 1.5;">
                            <strong>{% trans "Bring Documents:" %}</strong> {% trans "Please bring your ID and any relevant medical records" %}
                        </p>
                    </td>
                </tr>
            </table>
            
            <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
                <tr>
                    <td width="40" valign="top" style="padding-right: 10px;">
                        <span style="display: inline-block; width: 32px; height: 32px; background-color: #eef6fb; border-radius: 50%; text-align: center; line-height: 32px; font-size: 18px;"></span>
                    </td>
                    <td>
                        <p style="margin: 0; font-size: 15px; color: #1e293b; line-height: 1.5;">
                            <strong>{% trans "Need to Reschedule?" %}</strong> {% trans "Contact us at least 24 hours in advance" %}
                        </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
{% endblock %}

{% block cta_url %}{{ reschedule_link|default:'#' }}{% endblock %}
{% block cta_text %}{% trans "Reschedule or Cancel" %}{% endblock %}

{% block info_title %}{% trans "Contact Information" %}{% endblock %}
{% block info_content %}
<strong>{% trans "Phone:" %}</strong> {{ hospital_phone|default:"+966 XXX XXX XXXX" }}<br>
<strong>{% trans "Email:" %}</strong> {{ hospital_email|default:"appointments@alhammadihospital.com" }}<br>
<strong>{% trans "Emergency:" %}</strong> {% trans "For emergencies, please call 997 or visit our ER immediately" %}
{% endblock %}

{% block footer_address %}
{% trans "Patient Experience Management Department" %}<br>
{% trans "Al Hammadi Hospital" %}
{% endblock %}