{% extends "appointment/layout.html" %}
{% load i18n %}
{% load static %}
{% block customCSS %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/booking.css' %}"/>
{% endblock %}
{% block title %}
    {% trans "Rescheduling Successful" %}
{% endblock %}
{% block description %}
    {% trans "Your appointment rescheduling was successful. Please confirm via email." %}
{% endblock %}
{% block djappt_content %}
    <div class="djappt-shell djappt-shell--narrow djappt-booking content-body-apd">
        <div class="djappt-card djappt-card--roomy djappt-center main-content confirmation-message">
            <span class="djappt-status-icon djappt-status-icon--success" aria-hidden="true">
                <svg class="djappt-icon" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
                </svg>
            </span>
            <h1 class="djappt-title">{% trans "Rescheduling Successful" %}</h1>
            <p class="djappt-lead mb-4">{% trans "Your appointment rescheduling request has been successfully submitted. Please check your email and click on the confirmation link to finalize the rescheduling process." %}</p>
            <a class="btn djappt-btn djappt-btn-primary" href="/">{% trans "Go to Homepage" %}</a>
            {% include "appointment/_messages.html" with alert_class="text-start mt-3 mb-0" %}
        </div>
    </div>
{% endblock %}
{% block customJS %}
    <script src="{% static 'js/js-utils.js' %}"></script>
{% endblock %}