{% if event and (event.eventType != 'groupActivity' or event.date >= now) %}

    {% set targetGroups = event.eventTargetGroups.orderBy('title ASC').all() %}
    {% set address = event.address.one() %}
    {% set organiser = event.eventOrganiser.one() %}

    <section class="event-banner">
        <div class="container">
            <div class="event-banner__wrapper">
                <div class="event-banner__background">
                    {% set image = event.eventImage.one() %}
                    {% if image %}
                        {% include '_partials/image.twig' with {class: 'event-banner__bg-image', transform: 'banner'} %}
                    {% endif %}
                    <div class="event-banner__overlay"></div>
                </div>
                <div class="event-banner__content">
                    {% if targetGroups|length %}
                        <div class="event-banner__tag">
                            {% for targetGroupKey, targetGroup in targetGroups %}
                                <span class="event-banner__tag--pill upcoming__card-audience--{{ targetGroup.categoryColor }}">{{ targetGroup.shortTitle | upper }}</span>
                            {% endfor %}
                        </div>
                    {% endif %}

                    {% if event.eventType != 'individualActivity' %}
                        <div class="event-banner__date">
                            <i class="fa-solid fa-calendar-days" aria-hidden="true"></i>
                            <span>{{ event.dateLabel ?? event.date | date('l j F Y') }}</span>
                        </div>
                    {% endif %}

                    <h2 class="event-banner__title">{{ event.title }}</h2>

                    <div class="event-banner__meta">
                        {% if event.eventType %}
                            <span class="event-banner__meta-item">
                                    <i class="fa-solid fa-people-pulling" aria-hidden="true"></i>{{ ('event.details.eventType.' ~ event.eventType) | t }}
                                </span>
                        {% endif %}

                        {% if address %}
                            <span class="event-banner__meta-item">
                                    <i class="fa-solid fa-location-dot" aria-hidden="true"></i>{{ address.locality }}
                                </span>
                        {% endif %}

                        {% if organiser %}
                            <span class="event-banner__meta-item">
                                    <i class="fa-solid fa-building" aria-hidden="true"></i>{{ 'event.details.organisedBy'|t }} <strong>{{ organiser.title }}</strong>
                                </span>
                        {% endif %}
                    </div>

                    <div class="event-banner__text">{{ event.shortDescription }}</div>

                    <div class="event-banner__actions">
                        <a href="{{ url('events/' ~ event.slug) }}" class="btn btn--secondary event-banner__btn">
                            {{ 'link.event.moreInfoSubscribe'|t }}
                            <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
                        </a>

                        {% if event.financialSupportEnabled %}
                            <a href="{{ event.donationLink ? event.donationLink : (donations.donationLink ? donations.donationLink : '#') }}" class="btn btn--primary event-banner__btn" target="_blank">
                                <i class="fa-solid fa-hand-holding-heart" aria-hidden="true"></i>
                                {{ 'link.event.support'|t }}
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endif %}