<script>
 import { base } from '$app/paths';

 import {
     Carousel,
     CarouselItem,
 } from 'sveltestrap';

 import { challengeInfo } from '$lib/stores/challengeinfo.js';

 let activePartner = 0;
</script>

{#if $challengeInfo && $challengeInfo.partners}
<Carousel items={$challengeInfo.partners} bind:activeIndex={activePartner} ride="carousel" pause="hover" interval={25000}>
    <div class="carousel-inner h-100">
        {#each $challengeInfo.partners as partner, index}
            <CarouselItem bind:activeIndex={activePartner} itemIndex={index} class="h-100 text-end">
                {#if partner.href}
                    <a href="{partner.href}" target="_blank" rel="noreferrer" class="h-100">
                        <img src={partner.img.replace('$FILES$', base + '/files')} class="h-100" alt={partner.alt}>
                    </a>
                {:else}
                    <img src={partner.img.replace('$FILES$', base + '/files')} class="h-100" alt={partner.alt}>
                {/if}
            </CarouselItem>
        {/each}
    </div>
</Carousel>
{/if}
