{% load i18n static %}
<div class="slide-canvas slide-closing" {% if slide.background_color %}style="background:{{ slide.background_color }}"{% endif %}>
    <div class="slide-deco-blob slide-deco-blob--teal" style="width:600px;height:600px;top:-200px;left:-100px;"></div>
    <div class="slide-deco-blob slide-deco-blob--warm" style="width:400px;height:400px;bottom:-100px;right:-50px;"></div>

    {% if slide.content.logo_src %}
    <img src="{% static slide.content.logo_src %}" alt="{{ presentation.hospital.name }}" class="slide-closing__logo">
    {% else %}
    <img src="{% static 'img/HH_R_H_Logo.png' %}" alt="Al Hammadi Hospital" class="slide-closing__logo">
    {% endif %}

    <h1 class="slide-closing__title">{{ slide.title|default:_("Thank You") }}</h1>

    {% if slide.subtitle %}
    <p class="slide-closing__subtitle">{{ slide.subtitle }}</p>
    {% endif %}

    {% if slide.content.contact %}
    <div class="slide-closing__contact">
        {% for item in slide.content.contact %}
        <span>{{ item }}</span>
        {% if not forloop.last %}<span style="opacity:0.3;">|</span>{% endif %}
        {% endfor %}
    </div>
    {% endif %}

    <div class="slide-cover__wave" style="position:absolute;bottom:0;left:0;right:0;">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 120" preserveAspectRatio="none" style="display:block;width:100%;height:120px;">
            <path d="M0,120 C480,60 720,100 960,80 C1200,60 1440,40 1920,90 L1920,120 Z" fill="rgba(255,255,255,0.05)"/>
            <path d="M0,120 C320,80 640,110 960,90 C1280,70 1600,50 1920,100 L1920,120 Z" fill="rgba(255,255,255,0.03)"/>
        </svg>
    </div>
</div>