{# Template : Example Blocks #}

{% extends ('layouts/' ~ page_meta.layout) %}

{% block content %}


    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->

    {% include 'navigation/breadcrumbs.twig' %}

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->

    {% include 'includes/page_blocks/title_banner.twig' with {
        dark_background: false,
        class: 'lightBg'
    }%}

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->

    {% include 'includes/page_blocks/title_banner.twig' with {
        banner: p.pagedata['Title Banner with image'][0],
        dark_background: false,
        class: 'altImageBgColor'
    }%}

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->

    {% include 'includes/page_blocks/title_banner.twig' with {
        banner: p.pagedata['Title Banner with image'][0],
        dark_background: false,
        class: '',
        alt_bg_colors: true,
        left_aligned: true
    }%}



    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->

    {% include 'includes/elements/title_wrap.twig' with {
        title: p.pagedata['Title'][0]['Title']['value'],
        subtitle: p.pagedata['Title'][0]['Subtitle']['value'],
        content: p.pagedata['Title'][0]['Content']['value'],
        dark_background: false,
        class: 'lightBg'
    }%}



    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->



    {#
        If true, logos with 'show_in_banners' set to true within cross platform controller will be shown
        banner_mode: true
        If true, the banner will only show on mobile
        mobile_only: true,
        Pass an array of logos to use
        trust_logos: trust_logos || trust_banner_logos || trust_footer_logos
    #}
    {% include '/includes/elements/trust_logos.twig' with {
        banner_mode: true,
        mobile_only: false,
        trust_logos: trust_logos
    }%}

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->

    {% include 'includes/page_blocks/services_banner.twig' with {
        intro_title: p.pagedata['Services Intro'][0]['Title']['value'],
        intro_subtitle: p.pagedata['Services Intro'][0]['Subtitle']['value'],
        intro_content: p.pagedata['Services Intro'][0]['Content']['value'],
        button_link: p.pagedata['Services Intro'][0]['CTA Link']['value'],
        button_text: p.pagedata['Services Intro'][0]['CTA Text']['value'],
        class: 'homeServices',
        service_page: p
    }%}

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->


    {% include 'includes/page_blocks/sidebar_tabs.twig' with {
        tabs: tabs_from_controller
    }%}


    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->

    {% include 'includes/page_blocks/large_cta_banner.twig' with {
        dark_background: false,
        content_page: p
    }%}

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->

    {% include 'includes/page_blocks/large_cta_banner.twig' with {
        dark_background: false,
        content_page: p,
        class: 'lightBg'
    }%}

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->

    {% include 'includes/page_blocks/cta_banner.twig' with {
        dark_background: false,
        title: 'Up Next',
        content: '<p>Next blog article title</p>',
        meta_content: 'Saturday, 4th April, 2021',
        button_text: 'Learn more',
        link: '#'
    }%}

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->

    {% include 'includes/page_blocks/cta_banner.twig' with {
        dark_background: false,
        title: p.pagedata['CTA Banner'][0]['Title']['value'],
        content: p.pagedata['CTA Banner'][0]['Content']['value'],
        button_text: p.pagedata['CTA Banner'][0]['Button Text']['value'],
        link: p.pagedata['CTA Banner'][0]['Button Link']['value']
    }%}


    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->


    {% include 'includes/page_blocks/cta_boxes.twig' %}


    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->





    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->



    {% include 'includes/page_blocks/image_banner.twig' with {
        image_position: 'left',
        altOverlay: false,
        show_testimonial: false
    }%}

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->

    {% include 'includes/page_blocks/image_banner.twig' with {
        image_position: 'right',
        altOverlay: true,
        show_testimonial: false
    }%}

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->

    {% include 'includes/page_blocks/image_banner.twig' with {
        image_position: 'left',
        altOverlay: true,
        show_testimonial: false,
        faqs: p.pagedata['FAQ']
    }%}

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->


    {# ========================================
       CAROUSEL EXAMPLES
       ======================================== #}

    <section class="wrapper">
        <h2>Carousel Examples</h2>
        <p>Reference implementations using the new carousel component (Swiper-based, jQuery-free)</p>
    </section>

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->


    {# Example 1: Product Carousel (4 items) #}
    <section class="wrapper">
        <h3>Example 1: Product Carousel (4 items → 3 → 2)</h3>
        <p>A responsive product carousel with arrows, pagination, and autoplay (3s delay)</p>

        {% embed 'includes/elements/carousel.twig' with {
            cssClass: 'exampleProductCarousel',
            options: {
                perPage: 4,
                gap: 20,
                arrows: true,
                pagination: true,
                loop: true,
                autoplay: true,
                autoplaySpeed: 3000,
                breakpoints: {
                    480: { perPage: 2, arrows: false },
                    768: { perPage: 3 },
                    1024: { perPage: 4 }
                }
            }
        } %}
            {% block carousel_slides %}
                {% for product in example_products %}
                    <mtc-slide class="exampleProductCarousel__item">
                        <div class="productCard">
                            <div class="productCard__image">
                                <img src="{{ product.image }}" alt="{{ product.name }}" loading="lazy">
                            </div>
                            <h4 class="productCard__title">{{ product.name }}</h4>
                            <p class="productCard__price">{{ product.price }}</p>
                            <a href="{{ product.url }}" class="button">View Product</a>
                        </div>
                    </mtc-slide>
                {% endfor %}
            {% endblock %}
        {% endembed %}
    </section>

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->

    {# Example 2: Trust Logos Carousel (6 items) #}
    <section class="wrapper">
        <h3>Example 2: Trust Logos Carousel (6 → 3 → 2)</h3>
        <p>Logo carousel without arrows or pagination</p>

        {% embed 'includes/elements/carousel.twig' with {
            cssClass: 'exampleTrustLogos',
            options: {
                perPage: 6,
                gap: 20,
                arrows: false,
                pagination: false,
                speed: 1000,
                breakpoints: {
                    1000: { perPage: 3 },
                    480: { perPage: 2 }
                }
            }
        } %}
            {% block carousel_slides %}
                {% for logo in example_trust_logos %}
                    <mtc-slide class="exampleTrustLogos__item">
                        <div style="padding: 20px; text-align: center; border: 1px solid #ddd; border-radius: 8px;">
                            <img src="{{ logo.image }}" alt="{{ logo.alt }}" loading="lazy" style="max-width: 100%; height: auto;">
                        </div>
                    </mtc-slide>
                {% endfor %}
            {% endblock %}
        {% endembed %}
    </section>

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->


    {# Example 3: Selling Points Carousel (4 → 2 → 1) #}
    <section class="wrapper">
        <h3>Example 3: Selling Points Carousel (4 → 2 → 1)</h3>
        <p>Features/USPs carousel without arrows or pagination</p>

        {% embed 'includes/elements/carousel.twig' with {
            cssClass: 'exampleSellingPoints',
            options: {
                perPage: 4,
                gap: 20,
                arrows: false,
                pagination: false,
                breakpoints: {
                    768: { perPage: 2 },
                    480: { perPage: 1 }
                }
            }
        } %}
            {% block carousel_slides %}
                {% for point in example_selling_points %}
                    <mtc-slide class="exampleSellingPoints__item">
                        <div style="text-align: center; padding: 30px; background: #f8f9fa; border-radius: 8px;">
                            <i class="fa {{ point.icon }}" style="font-size: 48px; color: #4A90E2; margin-bottom: 15px;"></i>
                            <h4 style="margin: 15px 0 10px;">{{ point.title }}</h4>
                            <p>{{ point.description }}</p>
                        </div>
                    </mtc-slide>
                {% endfor %}
            {% endblock %}
        {% endembed %}
    </section>

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->


    {# ========================================
       SLIDESHOW EXAMPLES
       ======================================== #}

    <section class="wrapper">
        <h2>Slideshow Examples</h2>
        <p>Full-width slideshow implementations (single slide view)</p>
    </section>

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->


    {# Example 4: Hero Slideshow with Fade Effect #}
    <section class="wrapper">
        <h3>Example 4: Hero Slideshow (with fade effect)</h3>
        <p>Full-width hero banner with pagination</p>
    </section>

    {% include 'includes/elements/slideshow.twig' with {
        slides: example_hero_slides,
        cssClass: 'exampleHeroSlideshow',
        options: {
            arrows: false,
            pagination: true,
            fade: true,
            speed: 800,
            breakpoints: {
                768: { arrows: false }
            }
        }
    } %}

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->


    {# Example 5: Promotional Slideshow (no fade) #}
    <section class="wrapper">
        <h3>Example 5: Promotional Slideshow (slide transition)</h3>
        <p>Promotional slideshow with arrows</p>
    </section>

    {% include 'includes/elements/slideshow.twig' with {
        slides: example_promo_slides,
        cssClass: 'examplePromoSlideshow',
        options: {
            arrows: true,
            pagination: false,
            speed: 600,
            breakpoints: {}
        }
    } %}

    <div class="spacers" style="background: blue;"></div> <!-- .spacers -->

{% endblock %}
