{# FIXME: Needs a _base Teaser for the common Teaser structure  #}
{% set options = options|default({}) + {
    teaser_variant: 'visual',
    teaser_image_container_class: 'col-12',
    teaser_title: true,
    teaser_abstract: true,
} %}

{% block teaser %}
    <div class="components components-teaser components-teaser-{{ options.teaser_variant }} {{ options.teaser_container_class|default }}">

        {% block teaser_content %}
            {% if teaser.link|default %}
            <a href="{{ teaser.link|default }}" aria-label="{{ teaser.title|default }}">
            {% endif %}
                <div class="card">
                    <div class="row no-gutters">
                        <div class="{{ options.teaser_image_container_class }}">
                            <div class="card-img-wrapper">
                                <img class="card-img-top" alt="{{ teaser.title|default }}"
                                     src="{{ teaser.image|default }}">
                            </div>
                            <div class="card-body d-flex justify-content-center align-items-center">

                                {# Abstract #}
                                {% if options.teaser_abstract and teaser.abstract|default %}
                                    <div class="overlay overlay-abstract"></div>
                                    <p class="card-abstract">{{ teaser.abstract|default }}</p>
                                {% endif %}

                                {# Title #}
                                {% if options.teaser_title and teaser.title|default %}
                                    <div class="overlay overlay-title"></div>
                                    <h5 class="card-title text-center">{{ teaser.title|default }}</h5>
                                {% endif %}

                            </div>
                        </div>
                    </div>
                </div>
            {% if teaser.link|default %}
            </a>
            {% endif %}
        {% endblock %}

    </div>
{% endblock %}