<div class="nintex-fw-container" style="padding-top: 150px">
    <div class="np-homepage-featured-text">
        <div class="nintex-headline">
            <span class="lang-en-US">Meet the Team</span>
            <span class="lang-es">Meet the Team</span>
            <span class="lang-fr">Meet the Team</span>
            <span class="lang-de">Meet the Team</span>
            <span class="lang-en-GB">Meet the Team</span>
            <span class="lang-nl">Meet the Team</span>
            <span class="lang-pt-BR">Meet the Team</span>
        </div>
        <div class="nintex-subheadline">
            <span class="lang-en-US">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            <span class="lang-es">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            <span class="lang-fr">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            <span class="lang-de">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            <span class="lang-en-GB">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            <span class="lang-nl">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
            <span class="lang-pt-BR">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
        </div>
    </div>
    <div class="embla-container">
        <div class="embla-buttons">
            <button class="embla-button embla-button--prev" onclick="scrollPrevTeam()">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z"
                        fill="#BE0075"></path>
                </svg>
            </button>
            <button class="embla-button embla-button--next" onclick="scrollNextTeam()">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M9.71402 2L8.2998 3.41421L13.0927 8.20711L8.2998 13L9.71402 14.4142L15.9211 8.20711L9.71402 2Z"
                        fill="#BE0075"></path>
                </svg>
            </button>
        </div>
        <div class="embla" id="embla-meet-the-team">
            <div class="embla__container">
                <div class="embla__slide">
                    {% include "team_member_card", name: "John Doe", title: "CEO", image_url: "https://placehold.co/100x100" %}
                </div>
                <div class="embla__slide">
                    {% include "team_member_card", name: "Jane Doe", title: "CTO", image_url: "https://placehold.co/100x100" %}
                </div>
                <div class="embla__slide">
                    {% include "team_member_card", name: "Jim Beam", title: "CFO", image_url: "https://placehold.co/100x100" %}
                </div>
                <div class="embla__slide">
                    {% include "team_member_card", name: "Jane Doe", title: "CTO", image_url: "https://placehold.co/100x100" %}
                </div>
                <div class="embla__slide">
                    {% include "team_member_card", name: "Jim Beam", title: "CFO", image_url: "https://placehold.co/100x100" %}
                </div>
            </div>
        </div>
    </div>
</div>


<style>
    .team-member-card {
        background-color: white;
        box-shadow: 1px 2px 11px 0px rgba(0, 0, 0, 0.15);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 20px;
        border-radius: 8px;
        width: 100%;
        gap: 30px;
    }

    .team-member-card-image {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
    }

    .team-member-card-content {
        display: flex
;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    }



    .team-member-card-title {
        font-size: 14px;
        color: #666;
    }

    #embla-meet-the-team .embla__slide{
        padding: 5px;
    }

    @media screen and (min-width: 768px) {
    .embla__slide {
      flex: 0 0 calc((100% - 1rem) / 2);
      min-width: 0;
    }
  }
</style>

<script>
    var emblaTeam;
    document.addEventListener('DOMContentLoaded', function () {
        var emblaNode = document.querySelector('#embla-meet-the-team');
        const options = {
            loop: false
        }
        const plugins = [EmblaCarouselAutoplay({
            delay: 10000,
            stopOnMouseEnter: true,
        })]

        emblaTeam = EmblaCarousel(emblaNode, options, plugins);
    });

    function scrollPrevTeam() {
        if (emblaTeam.canScrollPrev()) {
            emblaTeam.scrollPrev();
        } else {
            emblaTeam.scrollTo(document.querySelectorAll('#embla-meet-the-team .embla__slide').length - 1);
        }
    }

    function scrollNextTeam() {
        if (emblaTeam.canScrollNext()) {
            emblaTeam.scrollNext();
        } else {
            emblaTeam.scrollTo(0);
        }
    }
</script>