{% extends "@Contao/content_element/text.html.twig" %}

{% block wrapper %}
    {# Wrapper element around headline and content #}
    {% set myFigure = '' %}
    {% set myBgColor = '' %}
    {% set hasLink = false %}

    {% if data.backgroundimage %}
        {% set myFigure = figure(data.backgroundimage,['proportional']) %}
    {% endif %}
    {% if data.backgroundcolor %}
        {% set myBgColor = data.backgroundcolor %}
    {% endif %}

    {% set div_attributes = attrs()
        .addClass('teaser_box')
        .mergeWith(attributes|default)
    %}

    {% if data.jumptotext and data.jumpto %}
        {%  set div_attributes = attrs()
            .addClass('has_button')
            .mergeWith(div_attributes|default)
        %}
    {% endif %}
    {% if image and image.metaData and image.metaData.getUrl() != '' %}
        {%  set div_attributes = attrs()
            .addClass('has_link')
            .mergeWith(div_attributes|default)
        %}
        {% set hasLink = true %}
    {% endif %}
    <{% block wrapper_tag %}div{% endblock %}{% block attributes %}{{ div_attributes }}{% endblock %}
            {% if myFigure.image is defined and myFigure.image is not empty %}
                style="background-image: url('{{ myFigure.image.getImageSrc() }}')"
            {% endif %}
            {% if myBgColor %}
                style="background-color: {{ myBgColor }}"
            {% endif %}
    >
        {% block inner %}
            {% block content %}
                {% if hasLink %}
                    <a class="teaserbox-link" title="mehr erfahren" href="{{image.metaData.getUrl()}}">
                {% endif %}
                <div class="side-1">
                    {% if headline.text %}
                        {{ block('headline_component') }}
                    {% endif %}

                    {% set text_attributes = attrs()
                        .addClass('rte')
                        .mergeWith(text_attributes|default)
                    %}
                    <div{% block text_attributes %}{{ text_attributes }}{% endblock %}>
                        {{text|csp_inline_styles|insert_tag_raw|encode_email|raw }}

                        {% if data.jumptotext and data.jumpto %}
                            {% set currentPath = insert_tag('link_url::' ~data.jumpto) %}
                            <a class="button-default" href="{{currentPath}}" title="{{data.jumptotext}}" target="_self">{{data.jumptotext}}</a>
                        {% endif %}
                    </div>


                </div>
                {% if image %}
                <div class="side-2">
                        {% if image.hasLightbox %}
                            {% set link_attributes = attrs(image.linkAttributes(true)|default)
                            .setIfExists('title', image.hasLightbox and image.hasMetadata ? image.metadata.title : null)
                            .mergeWith(image.options.link_attr|default)
                            .mergeWith(link_attributes|default)
                            %}
                            <a{{ link_attributes }}>
                        {% endif %}
                        <figure>
                            <img
                                    src="{{image.image.getImageSrc()}}"
                                    alt="{{image.metaData.alt}}"
                                    title="{{image.metaData.title}}"
                                    width="{{image.image.getPicture().getImg().width}}"
                                    height="{{image.image.getPicture().getImg().height}}"
                            >
                        </figure>
                        {% if image.hasLightbox %}
                            </a>
                        {% endif %}
                </div>
                {% endif %}
                {% if hasLink %}
                    </a>
                {% endif %}
            {% endblock %}
        {% endblock %}
    </div>
{% endblock %}