{% extends 'components/teaser/_base/default.twig' %}

{% set options = options|default({}) + {
    teaser_imagesize: 'teaser_landscape',
    teaser_variant: 'calendar',
    teaser_container_class: 'col-lg-4 col-sm-6 col-12',
    teaser_kicker: 'Türchen %j%'
} %}

{# Required variables
 # teaser - teaser object from generateTeaser
 # record - needed to have a unique slug for the whole calendar
#}

{% block teaser_content %}

    {% set active = (teaser.isOpen or teaser.competitionStatus in ['today', 'now'] ) %}
    {% set new = (teaser.competitionStatus in ['today'] ) %}
    {% set number = teaser.number|default >= 1 ? teaser.number : teaser.registerStart|date('j') %}
    {% set size = config.get('theme/thumbnails/aliases', [])[options.teaser_imagesize].size|default([]) %}

    {% set kicker = teaser.kicker|replace({
        '%j%': teaser.registerStart|date('j'),
    }) %}

    <section class="flip-item-wrap {{ new ? 'today' : '' }} {{ active ? 'active' : 'disabled' }} {{ teaser.isOpen ? 'opened' : 'closed' }}" id="calendar-item-{{ teaser.id }}">
        <img loading="lazy" class="fake-image img-fluid" src="{{ teaser.image }}" alt="{{ teaser.title|default }}" width="{{ size.0|default(2) }}" height="{{ size.1|default(1) }}">
        <input type="checkbox" class="flipper" id="flipper-{{ record.slug }}-{{ teaser.id }}">
        <label for="flipper-{{ record.slug }}-{{ teaser.id }}" class="flip-item {{ teaser.isOpen ? 'noAnimation' : '' }}">
            <figure class="front">
                <img loading="lazy"
                     src="{{ teaser.image }}"
                     alt="{{ teaser.title|default }}"
                     class="img-fluid"
                     width="{{ size.0|default(2) }}"
                     height="{{ size.1|default(1) }}" />
                {% if new %}
                    <div class="new">Neu</div>
                {% endif %}
                {% if active %}
                    <div class="arrow"></div>
                {% endif %}
                {# Gewinnspiele können auch nur ein ende haben FIXME: comment unclear? #}
                {% if teaser.registerStart|default %}
                    <div class="number">{{ number }}</div>
                {% endif %}
            </figure>
            {% if active %}
                <figure class="back">
                    <a href="{{ teaser.link }}" aria-label="{{ teaser.title|default }}">
                        <img src="{{ teaser.image }}" alt="{{ teaser.title|default }}" class="img-fluid">
                        <div class="flip-item-desc">
                            <div class="card-kicker">
                                {% if teaser.sponsored|default %}
                                    Anzeige
                                {% else %}
                                    {{ kicker }}
                                {% endif %}
                            </div>
                            <p class="card-title">{{ teaser.title }}</p>
                            <div class="arrow"></div>
                        </div>
                    </a>
                </figure>
            {% endif %}
        </label>
    </section>
{% endblock %}