<script>
 import {
     Carousel,
     CarouselItem,
 } from 'sveltestrap';

 let partners = [
     {
         img: '/img/epita.png',
         alt: 'Epita',
         href: 'https://www.epita.fr/',
     },
     {
         img: '/img/srs.png',
         alt: 'Laboratoire SRS Épita',
         href: 'https://srs.epita.fr/',
     },
     {
         img: '/img/comcyber.png',
         alt: 'Réserves de cyberdéfense',
     },
 ];
 let activePartner = 0;
</script>

<Carousel items={partners} bind:activeIndex={activePartner} ride="carousel" pause="hover" interval={25000}>
    <div class="carousel-inner h-100">
        {#each partners as partner, index}
            <CarouselItem bind:activeIndex={activePartner} itemIndex={index} class="h-100 text-end">
                {#if partner.href}
                    <a href="{partner.href}" target="_blank" class="h-100">
                        <img src={partner.img} class="h-100" alt={partner.alt}>
                    </a>
                {:else}
                    <img src={partner.img} class="h-100" alt={partner.alt}>
                {/if}
            </CarouselItem>
        {/each}
    </div>
</Carousel>
