<div class="container">
    <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            {% for block in entry.carousel.type('slide').all() %}
                <li data-target="#carouselIndicators" data-slide-to="{{ loop.index0 }}" class="{{ loop.first ? 'active' : '' }}"></li>
            {% endfor %}
        </ol>

        <div class="carousel-inner">
            {% for block in entry.carousel.type('slide').all() %}

                {% set bgColor = block.slideBackgroundColour %}
                {% set imageUrl = '' %}
                {% if craft.app.request.isMobileBrowser() %}
                    {% set imageUrl = block.sliderMobileImage.one().url %}
                {% else %}
                    {% set imageUrl = block.sliderImage.one().url %}
                {% endif %}

                <div class="carousel-item {{ loop.first ? 'active' : '' }}" style="background-color: {{ bgColor }}; background-image: url('{{ imageUrl }}');">

                    <div class="container d-flex align-items-center h-100">
                        <div class="row" style="width: 100%;">
                            <div class="col-12 col-md-7 col-xl-6" style="padding-top: 0px !important;">
                                <h2>{{ block.heading }}</h2>

                                {% if block.linkToWebpage is not empty and block.nameForLinkToPage is not empty %}
                                    <a target="{{ block.openLink1InNewTab ? '_blank' : '_self' }}" href="{{ block.linkToWebpage }}" class="read-more">{{ block.nameForLinkToPage }}</a>
                                {% endif %}

                                {% if block.linkToWebPage2 is not empty and block.nameForLink2 is not empty %}
                                    <a target="{{ block.openLink2InNewTab ? '_blank' : '_self' }}" href="{{ block.linkToWebPage2 }}" class="read-more read-more-two">{{ block.nameForLink2 }}</a>
                                {% endif %}

                                {% if block.showDonateButton %}
                                    <div class="banner-donations">
                                        <div class="amount">
                                            <a href="#">-</a> &euro; 10 <a href="#">+</a>
                                        </div>
                                        <a href="{{ 'donation-link'|t }}" class="banner-donate">{{ 'Donate'|t }}</a>
                                    </div>
                                {% endif %}

                            </div>
                        </div>
                    </div>

                </div>
            {% endfor %}
        </div>
    </div>
</div>


