{% if isSubscribed is not defined %}
    {% set isSubscribed = false %}
{% endif %}
{% if isPending is not defined %}
    {% set isPending = false %}
{% endif %}

<div class="upcoming__card {{ isPending ? 'upcoming__card-pending' : '' }}">
    {% set image = event.eventImage.one() %}
    <div class="upcoming__card-image">
        {% if image %}
            <a href="{{ url('events/' ~ event.slug) }}">
                {% include '_partials/image.twig' with {class: 'upcoming__card-img', transform: 'maxWidth1000'} %}
            </a>
        {% endif %}

        {% set targetGroups = event.eventTargetGroups.orderBy('title ASC').all() %}
        <div class="upcoming__card-overlay-top">
            {% if targetGroups|length %}
                <div class="upcoming__card-audience">
                    {% for targetGroupKey, targetGroup in targetGroups %}
                        <span class="upcoming__card-audience--pill upcoming__card-audience--{{ targetGroup.categoryColor }}">{{ targetGroup.shortTitle | upper }}</span>
                    {% endfor %}
                </div>
            {% endif %}

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

        {% if event.eventType != 'individualActivity' %}
            <div class="upcoming__card-date">
                {% if event.dateLabel %}
                    <div class="upcoming__card-date-day upcoming__card-date-label">{{ event.dateLabel | upper }}</div>
                {% else %}
                    <div class="upcoming__card-date-day">{{ event.date | date('l') | upper }}</div>
                    <div class="upcoming__card-date-number">{{ event.date | date('j') }}</div>
                    <div class="upcoming__card-date-month">
                        {{ event.date | date('F') | upper }}
                        <span class="upcoming__card-date-year">{{ event.date | date('Y') }}</span>
                    </div>
                {% endif %}
            </div>
        {% endif %}

        <div class="upcoming__card-type">
            {% if event.eventType == 'individualActivity' %}
                <i class="fa-solid fa-person-walking" aria-hidden="true"></i>
                <span>{{ 'event.details.eventType.individualActivity'|t }}</span>
            {% elseif event.eventType == 'groupActivity' %}
                <i class="fa-solid fa-people-pulling" aria-hidden="true"></i>
                <span>{{ 'event.details.eventType.groupActivity'|t }}</span>
            {% endif %}
        </div>
    </div>

    <div class="upcoming__card-content">
        <div class="upcoming__card-meta">
            {% set organiser = event.eventOrganiser.one() %}
            {% if organiser %}
                <div class="upcoming__card-organiser">
                    <span class="upcoming__card-organiser-label">{{ 'event.details.organisedBy'|t }}</span>
                    <strong>{{ organiser.title }}</strong>
                </div>
            {% endif %}
            {% set location = event.address.one() %}
            {% if location %}
                <div class="upcoming__card-location">
                    <i class="fa-solid fa-location-dot upcoming__card-location-icon" aria-hidden="true"></i>
                    <span>{{ location.locality | upper }}</span>
                </div>
            {% endif %}
        </div>

        <h3 class="upcoming__card-title">{{ event.title }}</h3>

        {% if isPending %}
            <div class="upcoming__card__pending-message" aria-live="polite">
                <i class="fa-solid fa-hourglass-half" aria-hidden="true"></i>
                <span>{{ 'form.event.subscribe.message.pending'|t }}</span>
            </div>
        {% else %}
            <p class="upcoming__card-description">{{ event.shortDescription }}</p>
        {% endif %}
    </div>

    <a href="{{ url('events/' ~ event.slug) }}" class="upcoming__card-link">
        {{ (isSubscribed ? 'link.event.moreInfo' : 'link.event.moreInfoSubscribe')|t }}
        <i class="fa-solid fa-chevron-right upcoming__card-link-icon" aria-hidden="true"></i>
    </a>
</div>