{% 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')
        .addClass('product_teaser')
        .addClass('line-after-headline')
        .mergeWith(attributes|default)
    %}

    {% if data.jumptotext and data.jumpto %}
        {%  set div_attributes = attrs()
        .addClass('has_button')
        .mergeWith(div_attributes|default)
        %}
    {% endif %}
    {% if 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>
                <div class="side-2">
                    {% if image %}
                        <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>
                    {% endif %}
                </div>
            {% if hasLink %}
                </a>
            {% endif %}
{% endblock %}
        {% endblock %}
        </div>
{% endblock %}