{% load i18n static %}
<div class="slide-canvas slide-cover" {% 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;right:-100px;"></div>
    <div class="slide-deco-blob slide-deco-blob--navy" style="width:400px;height:400px;bottom:-100px;left:-50px;"></div>

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

    <h1 class="slide-cover__title">{{ slide.title|default:presentation.title }}</h1>

    {% if slide.content.department %}
    <p class="slide-cover__department">{{ slide.content.department }}</p>
    {% endif %}

    {% if slide.subtitle or presentation.subtitle %}
    <p class="slide-cover__subtitle">{{ slide.subtitle|default:presentation.subtitle }}</p>
    {% endif %}

    <div class="slide-cover__meta">
        {% if presentation.hospital %}
        <span>{{ presentation.hospital.name }}</span>
        <span class="slide-cover__meta-divider"></span>
        {% endif %}
        {% if presentation.presentation_date %}
        <span>{{ presentation.presentation_date|date:"F Y" }}</span>
        {% else %}
        <span>{% now "F Y" %}</span>
        {% endif %}
        {% if slide.content.prepared_by %}
        <span class="slide-cover__meta-divider"></span>
        <span>{% trans "Prepared by" %} {{ slide.content.prepared_by }}</span>
        {% endif %}
    </div>

    <div class="slide-cover__wave">
        <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>