{# ThemeWare: CMS element "Text slide" #}

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

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

{% set twtHeroSlideItemBtnText = twtHeroSlideItem.btnText.value %}
{% set twtHeroSlideItemTeaser = twtHeroSlideItem.teaser.value %}
{% set twtHeroSlideItemContent = twtHeroSlideItem.content.value %}
{% set twtHeroSlideItemTitle = twtHeroSlideItem.title.value %}
{% set twtHeroSlideItemUrl = twtHeroSlideItem.url.value %}

{% set twtHeroSlideItemBgOverlay = twtHeroSlideItem.bgOverlay.value %}
{% set twtHeroSlideItemBtnNewTab = twtHeroSlideItem.newTab.value %}
{% set twtHeroCtaSlideItemFontFamily = twtHeroSlideItem.fontFamily.value %}
{% set twtHeroCtaSlideItemFontFamilyHeadline = twtHeroSlideItem.fontFamilyTitle.value %}
{% set twtHeroCtaSlideItemFontFamilyTeaser = twtHeroSlideItem.fontFamilyTeaser.value %}
{% set twtHeroSlideItemHorizontalAlignment = twtHeroSlideItem.horizontalAlignment.value %}
{% set twtHeroSlideItemMaxWidth = twtHeroSlideItem.maxWidth.value %}
{% set twtHeroSlideItemOverlay = twtHeroSlideItem.overlay.value %}
{% set twtHeroSlideItemOverlayAnimation = twtHeroSlideItem.overlayAnimation.value %}
{% set twtHeroSlideItemOverlaySizing = twtHeroSlideItem.overlaySizing.value %}
{% set twtHeroSlideItemRounded = twtHeroSlideItem.rounded.value %}
{% set twtHeroSlideItemShadow = twtHeroSlideItem.shadow.value %}
{% set twtHeroSlideItemTextColor = twtHeroSlideItem.textColor.value %}
{% set twtHeroSlideItemTextColorTeaser = twtHeroSlideItem.textColorTeaser.value %}
{% set twtHeroSlideItemTextColorTitle = twtHeroSlideItem.textColorTitle.value %}
{% set twtHeroSlideItemVerticalAlignment = twtHeroSlideItem.verticalAlignment.value %}
{% set twtHeroSlideItemWidth = twtHeroSlideItem.width.value %}

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

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

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

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

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

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

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

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

{% block element_twt_text_image_slide %}
    {# ThemeWare: Set image element #}
    {% set imageElement %}
        {% block element_twt_text_image_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="{{ twtHeroSlideItemTitle }}" srcset="{{ srcsetValue }}">
        {% endblock %}
    {% endset %}

    {# ThemeWare: Set text element #}
    {% set textElement %}
        {% block element_twt_text_image_slide_text %}
            <div class="twt-hero-slider-item-container twt-text-image-slide{% if twtHeroSlideItemOverlaySizing == "boxed" %} is-{{ twtHeroSlideItemOverlaySizing }}{% endif %}">
                <div class="twt-hero-slider-item-inside justify-content-{{ twtHeroSlideItemHorizontalAlignment }} align-items-{{ twtHeroSlideItemVerticalAlignment }}">
                    <div class="twt-hero-slider-item-content {{ blockClasses|sort|join(' ') }}" style="width: {{ twtHeroSlideItemWidth }}; max-width: {{ twtHeroSlideItemMaxWidth }};{% if twtHeroSlideItemOverlay %} background-color: {{ twtHeroSlideItemBgOverlay }};{% endif %}">
                        {% if twtHeroSlideItemTeaser %}
                            <p class="twt-hero-slider-item-teaser teaser{% if twtHeroCtaSlideItemFontFamilyTeaser != 'base' %} twt-font-family-{{ twtHeroCtaSlideItemFontFamilyTeaser }}{% endif %}" style="color: {{ twtHeroSlideItemTextColorTeaser }};">{{ twtHeroSlideItemTeaser }}</p>
                        {% endif %}
                        {% if twtHeroSlideItemTitle %}
                            <p class="twt-hero-slider-item-headline headline h3{% if twtHeroCtaSlideItemFontFamilyHeadline != 'base' %} twt-font-family-{{ twtHeroCtaSlideItemFontFamilyHeadline }}{% endif %}" style="color: {{ twtHeroSlideItemTextColorTitle }};">{{ twtHeroSlideItemTitle }}</p>
                        {% endif %}
                        {% if twtHeroSlideItemContent %}
                            <div class="twt-hero-slider-item-text text{% if twtHeroCtaSlideItemFontFamily != 'base' %} twt-font-family-{{ twtHeroCtaSlideItemFontFamily }}{% endif %}" style="color: {{ twtHeroSlideItemTextColor }};">{{ twtHeroSlideItemContent|raw }}</div>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endblock %}
    {% endset %}

    {# ThemeWare: Set content #}
    {% block element_twt_text_image_slide_content %}
        {% if element.translated.config.url.value %}
            <a href="{{ element.translated.config.url.value }}"
               title="{{ twtHeroSlideItemTitle }}"
               class="cms-image-link"
               {% if element.translated.config.newTab.value %}target="_blank" rel="noopener"{% endif %}>
                {# ThemeWare: Load image element #}
                {{ imageElement }}

                {# ThemeWare: Load text element #}
                {% if element.translated.config.title.value %}
                    {{ textElement }}
                {% endif %}
            </a>
        {% else %}
            {# ThemeWare: Load image element #}
            {{ imageElement }}

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

{% endblock %}