<template>
    <b-carousel
        :id="'banner-carousel-' + _uid"
        class="banner"
        :indicators="slides.length>1"
    >
        <b-carousel-slide v-for="(slide, index) of slides" :key="index">
            <template v-slot:img>
                <b-link
                    v-if="slide.link"
                    :href="slide.link"
                    :target="slide.linkTarget"
                >
                    <div
                        class="image-container"
                        :class="slide.gradient"
                    >
                        <img
                            class="d-block w-100 h-100"
                            :src="slide.img"
                        >
                    </div>
                </b-link>
                <div
                    class="image-container"
                    v-else
                    :class="slide.gradient"
                >
                    <img
                        class="d-block w-100 h-100"
                        :src="slide.img"
                    >
                </div>
            </template>
        </b-carousel-slide>
    </b-carousel>
</template>

<script>
module.exports = {
    name: 'Banner',
    props: {
        slides: Array,
    },
}
</script>

<style lang="stylus">
#app
    .banner
        margin-top -60px
        @media(max-width 991px)
            margin-top 0px
    .image-container
        max-width 100%
        width 100vw
        height 25vw
        @media (max-width 991px)
          width 100%
        img
          width 100%
          height 100%
          object-fit cover
</style>
