{% set hero_classes = "hero" %}
{% if hero %}
    {% set hero_classes = hero_classes ~ " hero-has-media hero-" ~ hero.type %}
{% endif %}

<section
    class="{{ hero_classes }}"
    {% if hero and hero.style %}style="{{ hero.style | e }}"{% endif %}
>
    {% if hero and hero.type == "image" %}
        <img class="hero-media" src="{{ hero.src | e }}" alt="">
    {% elif hero and hero.type == "video" %}
        <video class="hero-media" src="{{ hero.src | e }}" autoplay muted loop playsinline></video>
    {% elif hero and hero.type == "youtube" and external_content_enabled %}
        <iframe
            class="hero-media hero-youtube-frame"
            src="{{ hero.src | e }}"
            title="YouTube-Hero"
            allow="autoplay; encrypted-media; picture-in-picture"
            allowfullscreen
        ></iframe>
    {% elif hero and hero.type == "youtube" %}
        <div class="hero-media external-placeholder">
            <div>
                <strong>Externes YouTube-Video</strong>
                <p>Dieses Video wird aus Datenschutzgruenden nicht automatisch geladen.</p>
                <button
                    class="external-load-button"
                    type="button"
                    data-embed-src="{{ hero.src | e }}"
                    data-embed-class="hero-media hero-youtube-frame"
                    data-embed-title="YouTube-Hero"
                    data-embed-allow="autoplay; encrypted-media; picture-in-picture"
                >
                    Video laden
                </button>
            </div>
        </div>
    {% endif %}

    <div class="hero-content">
        {{ content | safe }}
    </div>
</section>