{# FIXME: Needs a _base Teaser for the common Teaser structure  #}
{% set options = options|default({}) + {
    teaser_variant: 'contacts',
    teaser_image_container_class: 'col-4',
    teaser_text_container_class: 'col-8 d-flex align-items-center',
    teaser_image: true,
    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 %}
                <div class="card">
                    <div class="row no-gutters">
                        {% if options.teaser_image %}
                            <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>
                        {% endif %}
                        <div class="{{ options.teaser_image ? options.teaser_text_container_class : 'col-12' }}">
                            <div class="card-body">

                                {# Title #}
                                {% if options.teaser_title %}
                                    <p class="card-title">{{ teaser.title|default }}</p>
                                {% endif %}

                                {% if options.teaser_abstract %}
                                    <div class="card-abstract">

                                        <p class="card-role">{{ teaser.role|default }}</p>
                                        <p class="card-phone">{{ teaser.phone|default }}</p>
                                        <p class="card-email"><a href="mailto:{{ teaser.email|default }}" aria-label="E-mail an">{{ teaser.email|default }}</a></p>

                                    </div>
                                {% endif %}

                            </div>
                        </div>
                    </div>
                </div>
        {% endblock %}

    </div>
{% endblock %}