<template>
    <div class="carousel-my col-12" :class="sizeClass">
        <b-carousel
            :id="'carousel-fade-' + _uid"
            controls
            indicators
            img-width="1024"
            img-height="683"
        >
            <b-carousel-slide
                v-for="(slide, index) of slides"
                :key="index"
                :class="slide.gradient"
            >
                <template v-slot:img>
                    <b-link
                        :to="slide.link"
                        class="carousel-my-item"
                        :target="slide.linkTarget"
                    >
                        <img
                            class="d-block w-100 h-100"
                            width="1024"
                            height="683"
                            :src="slide.img"
                            alt="image slot"
                        >
                        <div class="carousel-my-item-content d-flex flex-column justify-content-between">
                            <div class="carousel-my-item-content-text">
                                <div class="carousel-my-item-content-text-title" v-html="slide.title">
                                </div>
                                <p v-for="(text, textIndex) of slide.texts" :key="textIndex" v-html="text">
                                </p>
                            </div>
                            <div class="carousel-my-item-content-date">
                                {{slide.date}}
                            </div>
                        </div>
                    </b-link>
                </template>
            </b-carousel-slide>
        </b-carousel>
    </div>
</template>

<script>
module.exports = {
    name: 'Carousel',
    mixins: [sizableComponentMixin],
    props: {
        slides: Array,
    },
};
</script>

<style lang="stylus">
#app
    .carousel-my
        .carousel
            &-item
                height 350px
                @media (max-width 1199px)
                    height 290px
                @media (max-width 991px)
                    height 330px
                @media (max-width 767px)
                    height auto
                @media (max-width 575px)
                    height 290px
            &-indicators
                z-index 1
            &-control-next-icon
                background-image url("/img/next_slide.svg")
            &-control-prev-icon
                background-image url("/img/prev_slide.svg")

    .carousel-my
        margin-bottom 27px
        &-item
            img
                object-fit cover
            &-content
                z-index 1
                color #ffffff
                padding 20px 0 55px
                position absolute
                top 0
                left 15%
                right 15%
                bottom 0
                &:hover
                    text-decoration none
                &-text
                    font-size 16px
                    line-height 150%
                    @media (max-width 320px)
                        font-size 14px
                    &-title
                        font-size 32px
                        line-height 120%
                        margin-bottom 16px
                        @media (max-width 320px)
                            font-size 28px
                &-date
                    font-weight normal
                    font-size 12px
                    line-height 150%
                    opacity .7
                    @media (max-width 320px)
                        font-size 11px
</style>
