{% if banner is empty %}
    {% set banner = p.pagedata['Image Banner'][0] %}
{% endif %}

{% if image_position is empty %}
    {% set image_position = 'right' %}
{% endif %}

{% if image_folder is empty %}
    {% set image_folder = 'cms_images' %}
{% endif %}

{% if banner['Banner Image']['value'] is not empty %}
    {% set banner_image = banner['Banner Image'] %}
{% endif %}

{% if banner['Testimonial']['value'] is not empty %}

   {% set show_testimonial = true %}

    {% if banner['Image']['value'] is not empty %}
        {% set banner_image = banner['Image'] %}
    {% endif %}

{% endif %}



{% if banner['Title']['value'] is not empty or banner['Content']['value'] is not empty or show_testimonial %}

    <div class="imageBanner image{{ image_position|capitalize }} {{ class }} {% if alt_background is not empty %}altBackground{% endif %} {% if image_top_mobile is not empty %}imageTopMobile{% endif %}">


        <div class="wrapper">

            <div class="innerImageBanner">

                <div class="bannerContentWrap">

                    <div class="innerContentWrapper">

                        {% if show_trustpilot is not empty %}
                            <div class="trustPilotBox">
                                {% include '/includes/vendors/trust_pilot_badge.twig' %}
                            </div> <!-- .trustPilotWidget -->
                        {% endif %}


                        {% if show_testimonial is not empty %}

                            {% if banner['Quote by']['value'] is not empty %}
                                <h4 class="bannerSubtitle">{{ banner['Quote by']['value'] }}</h4>
                            {% endif %}

                            {% if banner['Testimonial']['value'] is not empty %}
                                <div class="wysiwyg whiteBg testimonialText">
                                    {{ banner['Testimonial']['value']|raw }}
                                </div> <!-- .wysiwyg -->
                            {% endif %}

                            <div class="trustPilotBox">
                                <div class="tpPlaceholder" style="width:100%;height: auto;background:#ccc;opacity:0.24;padding:16px;font-weight: bold;">Trust pilot</div> <!-- .tpPlaceholder -->
                            </div> <!-- .trustPilotBox -->

                        {% else %}

                            {% if banner['Subtitle']['value'] is not empty %}
                                <h4 class="bannerSubtitle">{{ banner['Subtitle']['value']|raw }}</h4>
                            {% endif %}

                            {% if banner['Title']['value'] is not empty %}
                                <div class="bannerTitle">{{ banner['Title']['value']|raw }}</div>
                            {% endif %}

                            {% if banner['Content']['value'] is not empty %}
                                <div class="wysiwyg">
                                    {{ banner['Content']['value']|raw }}
                                </div> <!-- .wysiwyg -->
                            {% endif %}

                            {% if banner['Button Link']['value'] is not empty  %}
                                <div class="buttonWrap">
                                    <a href="{{ banner['Button Link']['value'] }}" class="button">
                                        {{ banner['Button Text']['value'] }}
                                    </a>
                                </div> <!-- .buttonWrap -->
                            {% elseif button_link is not empty and button_text is not empty  %}
                                <div class="buttonWrap">
                                    <a href="{{ button_link }}" class="button">
                                        {{ button_text  }}
                                    </a>
                                </div> <!-- .buttonWrap -->
                            {% endif %}
                        
                            

                        {% endif %}


                    </div> <!-- .innerContentWrapper -->

                </div> <!-- .bannerContentWrap -->

                {% if banner_image['value'] is not empty  %}

                    <div class="imageBannerImages">


                        <picture class="imageWrap {% if alt_background is not empty %}altGradient{% endif %} {% if image_top_mobile is not empty %}mobileImageTop{% endif %}">

                            <source
                                    srcset="/{{ image_folders[image_folder]['image_banner_mobile']['path'] }}{{ banner_image['value'] }}"
                                    media="(max-width: 640px)">

                            <img
                                    src="/{{ image_folders[image_folder]['image_banner_desktop']['path'] }}{{ banner_image['value'] }}"
                                    alt="{{ banner_image['alt'] }}"
                                    width="2000"
                                    height="1000"
                                    loading="lazy"
                            />

                        </picture> <!-- .imageWrap -->


                    </div> <!-- .bannerRight -->

                {% endif %}

            </div> <!-- .innerImageBanner -->

        </div> <!-- .wrapper -->



    </div> <!-- .imageBanner -->
    
{% endif %}
