{% extends "appointment/layout.html" %}
{% load i18n %}
{% load static %}
{% block customCSS %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/booking.css' %}"/>
{% endblock %}
{% block title %}{{ page_title }}{% endblock %}
{% block description %}{{ page_description }}{% endblock %}
{% block djappt_content %}
    <div class="djappt-shell djappt-shell--narrow djappt-booking">
        <div class="djappt-card djappt-card--roomy djappt-center">
            <span class="djappt-status-icon" aria-hidden="true">
                <svg class="djappt-icon" viewBox="0 0 16 16" fill="currentColor">
                    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"/>
                </svg>
            </span>
            <h1 class="djappt-title title">{{ page_title }}</h1>
            <p class="djappt-lead message">
                {{ page_message }}
            </p>
            {% if messages %}
                {% for message in messages %}
                    <div class="alert alert-dismissible text-start mt-3 mb-0 {% 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 %}