{# ThemeWare: CMS element "Call-To-Action slide" #}

{# ---------------- START: SET VARS ---------------- #}

{# ThemeWare: Set variables #}
{#% set twtHeroCtaSlideItem = element.translated.config %#}
{% set twtHeroCtaSlideItem = element.fieldConfig.elements %}

{% set twtHeroCtaSlideItemBtnText = twtHeroCtaSlideItem.btnText.value %}
{% set twtHeroCtaSlideItemTeaser = twtHeroCtaSlideItem.teaser.value %}
{% set twtHeroCtaSlideItemContent = twtHeroCtaSlideItem.content.value %}
{% set twtHeroCtaSlideItemTitle = twtHeroCtaSlideItem.title.value %}
{% set twtHeroCtaSlideItemUrl = twtHeroCtaSlideItem.url.value %}

{% set twtHeroCtaSlideItemBgOverlay = twtHeroCtaSlideItem.bgOverlay.value %}
{% set twtHeroCtaSlideItemButtonOutline = twtHeroCtaSlideItem.buttonOutline.value %}
{% set twtHeroCtaSlideItemButtonStyle = twtHeroCtaSlideItem.buttonStyle.value %}
{% set twtHeroCtaSlideItemBtnNewTab = twtHeroCtaSlideItem.newTab.value %}
{% set twtHeroCtaSlideItemFontFamily = twtHeroCtaSlideItem.fontFamily.value %}
{% set twtHeroCtaSlideItemFontFamilyHeadline = twtHeroCtaSlideItem.fontFamilyTitle.value %}
{% set twtHeroCtaSlideItemFontFamilyTeaser = twtHeroCtaSlideItem.fontFamilyTeaser.value %}
{% set twtHeroCtaSlideItemHorizontalAlignment = twtHeroCtaSlideItem.horizontalAlignment.value %}
{% set twtHeroCtaSlideItemMaxWidth = twtHeroCtaSlideItem.maxWidth.value %}
{% set twtHeroCtaSlideItemOverlay = twtHeroCtaSlideItem.overlay.value %}
{% set twtHeroCtaSlideItemOverlayAnimation = twtHeroCtaSlideItem.overlayAnimation.value %}
{% set twtHeroCtaSlideItemOverlaySizing = twtHeroCtaSlideItem.overlaySizing.value %}
{% set twtHeroCtaSlideItemRounded = twtHeroCtaSlideItem.rounded.value %}
{% set twtHeroCtaSlideItemShadow = twtHeroCtaSlideItem.shadow.value %}
{% set twtHeroCtaSlideItemTextColor = twtHeroCtaSlideItem.textColor.value %}
{% set twtHeroCtaSlideItemTextColorTeaser = twtHeroCtaSlideItem.textColorTeaser.value %}
{% set twtHeroCtaSlideItemTextColorTitle = twtHeroCtaSlideItem.textColorTitle.value %}
{% set twtHeroCtaSlideItemVerticalAlignment = twtHeroCtaSlideItem.verticalAlignment.value %}
{% set twtHeroCtaSlideItemWidth = twtHeroCtaSlideItem.width.value %}

{# ---------------- END: SET VARS ---------------- #}

{# ThemeWare: Set classes #}
{% set blockClasses = ['content'] %}

{# ThemeWare: Add styling classes #}
{% if twtHeroCtaSlideItemOverlay %}
    {% set blockClasses = ['is-styled']|merge(blockClasses) %}

    {% if twtHeroCtaSlideItemShadow == "small" %}
        {% set blockClasses = ['shadow-sm']|merge(blockClasses) %}
    {% elseif twtHeroCtaSlideItemShadow == "regular" %}
        {% set blockClasses = ['shadow']|merge(blockClasses) %}
    {% elseif twtHeroCtaSlideItemShadow == "large" %}
        {% set blockClasses = ['shadow-lg']|merge(blockClasses) %}
    {% endif %}

    {% if twtHeroCtaSlideItemRounded == "rounded" %}
        {% set blockClasses = ['rounded']|merge(blockClasses) %}
    {% endif %}
{% endif %}

{# ThemeWare: Add animation classes #}
{% if twtHeroCtaSlideItemOverlayAnimation != "none" %}
    {% set blockClasses = ['twt-animate']|merge(blockClasses) %}

    {% if twtHeroCtaSlideItemOverlayAnimation == "fadeIn" %}
        {% set blockClasses = ['twt-fade-in']|merge(blockClasses) %}
    {% elseif twtHeroCtaSlideItemOverlayAnimation == "fadeInDown" %}
        {% set blockClasses = ['twt-fade-in-down']|merge(blockClasses) %}
    {% elseif twtHeroCtaSlideItemOverlayAnimation == "fadeInLeft" %}
        {% set blockClasses = ['twt-fade-in-left']|merge(blockClasses) %}
    {% elseif twtHeroCtaSlideItemOverlayAnimation == "fadeInRight" %}
        {% set blockClasses = ['twt-fade-in-right']|merge(blockClasses) %}
    {% elseif twtHeroCtaSlideItemOverlayAnimation == "fadeInUp" %}
        {% set blockClasses = ['twt-fade-in-up']|merge(blockClasses) %}
    {% endif %}
{% endif %}

{# TODO: "twt-" prefix Blocks... #}

{% block element_twt_call_to_action_slide %}
    {# ThemeWare: Set image element #}
    {% set imageElement %}
        {% block element_twt_call_to_action_slide_image_media %}
            {# https://github.com/shopware/platform/blob/d6c853ca3b6b167d61d70e6329f4fcface5c5245/src/Storefront/Resources/views/storefront/utilities/thumbnail.html.twig #}
            {% set thumbnails = element.data.media.thumbnails|sort|reverse %}

            {# ThemeWare: Generate srcset with all available thumbnails #}
            {% set srcsetValue %}{% apply spaceless %}
                {{ element.data.media|sw_encode_media_url }} {{ thumbnails|first.width + 1 }}w, {% for thumbnail in thumbnails %}{{ thumbnail.url | sw_encode_url }} {{ thumbnail.width }}w{% if not loop.last %}, {% endif %}{% endfor %}
            {% endapply %}{% endset %}

            <img class="w-100" src="{{ element.data.media.url }}" alt="{{ twtHeroCtaSlideItemTitle }}" srcset="{{ srcsetValue }}">
        {% endblock %}
    {% endset %}

    {# ThemeWare: Set text element #}
    {% set textElement %}
        {% block element_twt_call_to_action_slide_text %}
            <div class="twt-hero-slider-item-container twt-call-to-action-slide{% if twtHeroCtaSlideItemOverlaySizing == "boxed" %} is-{{ twtHeroCtaSlideItemOverlaySizing }}{% endif %}">
                <div class="twt-hero-slider-item-inside justify-content-{{ twtHeroCtaSlideItemHorizontalAlignment }} align-items-{{ twtHeroCtaSlideItemVerticalAlignment }}">
                    <div class="twt-hero-slider-item-content {{ blockClasses|sort|join(' ') }}" style="width: {{ twtHeroCtaSlideItemWidth }}; max-width: {{ twtHeroCtaSlideItemMaxWidth }};{% if twtHeroCtaSlideItemOverlay %} background-color: {{ twtHeroCtaSlideItemBgOverlay }};{% endif %}">
                        {% if twtHeroCtaSlideItemTeaser %}
                            <p class="twt-hero-slider-item-teaser teaser{% if twtHeroCtaSlideItemFontFamilyTeaser != 'base' %} twt-font-family-{{ twtHeroCtaSlideItemFontFamilyTeaser }}{% endif %}" style="color: {{ twtHeroCtaSlideItemTextColorTeaser }};">{{ twtHeroCtaSlideItemTeaser }}</p>
                        {% endif %}
                        {% if twtHeroCtaSlideItemTitle %}
                            <p class="twt-hero-slider-item-headline headline h3{% if twtHeroCtaSlideItemFontFamilyHeadline != 'headline' %} twt-font-family-{{ twtHeroCtaSlideItemFontFamilyHeadline }}{% endif %}" style="color: {{ twtHeroCtaSlideItemTextColorTitle }};">{{ twtHeroCtaSlideItemTitle }}</p>
                        {% endif %}
                        {% if twtHeroCtaSlideItemContent %}
                            <div class="twt-hero-slider-item-text text{% if twtHeroCtaSlideItemFontFamily != 'base' %} twt-font-family-{{ twtHeroCtaSlideItemFontFamily }}{% endif %}" style="color: {{ twtHeroCtaSlideItemTextColor }};">
                                {{ twtHeroCtaSlideItemContent|raw }}
                            </div>
                        {% endif %}
                        {% if twtHeroCtaSlideItemBtnText %}
                            <a href="{{ twtHeroCtaSlideItemUrl }}"
                               title="{{ twtHeroCtaSlideItemTitle }}"
                               class="twt-hero-slider-item-btn btn btn-{% if twtHeroCtaSlideItemButtonOutline %}outline-{% endif %}{{ twtHeroCtaSlideItemButtonStyle }}"
                               {% if twtHeroCtaSlideItemBtnNewTab %}target="_blank" rel="noopener"{% endif %}>
                                {{ twtHeroCtaSlideItemBtnText }}
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endblock %}
    {% endset %}

    {# ThemeWare: Set content #}
    {% block element_twt_call_to_action_slide_content %}
        {# ThemeWare: Load image element #}
        {{ imageElement }}

        {# ThemeWare: Load text element #}
        {{ textElement }}
    {% endblock %}

{% endblock %}