{% set propertyName = propertyName|default('blocks') %}
{% set uid = random() %}
{% if block.heading|default('') %}
    {% if image is defined and image != "" %}
        {% set submedia = sulu_resolve_media(image, app.request.locale) %}
    {% endif %}
    <img src="{{ (submedia is defined) ? submedia.thumbnails["pageImage"] : '' }}" class="pageImage" alt="{{ submedia.title }}" title="{{ submedia.description|default(submedia.title) }}">
    <div class="container">
        <div class="page-headline-wrapper mt-4 mt-lg-5">
            <h1 id="heading-{{ uid }}" class="page-headline {% if block.suffix %}has-suffixes{% endif %}">

                {% autoescape false %}
                {{ block.heading|pipe|nl2br|hyphenate }}
                {% if block.suffix %}
                    {% set suffixes = block.suffix|split(',') %}
                    <span class="suffixes">
                        {% for suffix in suffixes %}
                            <span class="suffix-{{ loop.index0 }} {{ (loop.index0 == 0) ? "active" : "inactive initial" }}">{{ suffix|pipe|nl2br|hyphenate }}</span>
                        {% endfor %}
                    </span>
                {% endif %}
                {% endautoescape %}
            </h1>
            {% if block.subline|default('') %}
                <h3 class="page-headline-muted">
                    {% autoescape false %}
                    {{ block.subline|pipe|nl2br|hyphenate }}
                    {% endautoescape %}
                </h3>
            {% endif %}
        </div>
    </div>
{% endif %}
<script>
    {% if block.suffix %}
    function setIntervalImmediately(func, interval) {
        func();
        return setInterval(func, interval);
    }
    let headingCount = {{ suffixes|length }};
    let headingIndex = 0;
    let changeSuffix = setIntervalImmediately( _ => {
        document.querySelectorAll('#heading-{{ uid }} .suffixes span').forEach(function(el) {
            el.classList.remove('active');
            el.classList.add('inactive');
        });
        let currentEl = document.querySelectorAll('#heading-{{ uid }} .suffixes span')[headingIndex];
        currentEl.classList.remove('inactive', 'initial');
        currentEl.classList.add('active');
        headingIndex++;
        if (headingIndex >= headingCount) {
            headingIndex = 0;
        }
    }, 2000);
    {% endif %}
</script>