{% extends BASE_TEMPLATE %}
{% load i18n %}
{% load static %}
{% block customCSS %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/thank_you.css' %}"/>
{% endblock %}
{% block title %}
    {{ page_title }}
{% endblock %}
{% block description %}
    {{ page_description }}
{% endblock %}
{% block body %}
    <div class="container content-body-apd">
        <div class="main-content">
            <h1 class="thank-you-title">{% trans "See you soon" %} !</h1>
            <p class="thank-you-message">{% trans "We've successfully scheduled your appointment! Please check your email for all the details" %}.</p>
            <p class="appointment-details-title">{% trans "Appointment details" %}:</p>
            <ul class="appointment-details">
                <li>{% trans 'Service' %}: {{ appointment.get_service_name }}</li>
                <li>{% trans 'Appointment Date' %}: {{ appointment.get_appointment_date }}</li>
                <li>{% trans 'Appointment Time' %}: {{ appointment.get_start_time }}</li>
                <li>{% trans 'Duration' %}: {{ appointment.get_service_duration }}</li>
            </ul>
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
                         role="alert">{{ message }}</div>
                {% endfor %}
            {% endif %}
        </div>
    </div>
{% endblock %}
{% block customJS %}
    <script src="{% static 'js/js-utils.js' %}"></script>
{% endblock %}