<template>
    <div
        v-if="remoteData"
        class="remote34Card align-self-stretch col-12"
        :class="sizeClass"
    >
        <b-link
            :href="remoteData.link"
            :target="card.linkTarget"
            class="remote34Card-content d-flex flex-column justify-content-start h-100"
        >
            <div
                class="remote34Card-content-img"
                :class="remoteData.gradient"
            >
                <img :src="remoteData.img" alt="news image">
            </div>
            <div class="remote34Card-content-info d-flex flex-column justify-content-between h-100">
                <div class="remote34Card-content-info-text">
                    <div class="remote34Card-content-info-text-title" v-html="remoteData.title">
                    </div>
                </div>
                <div class="remote34Card-content-info-date">
                   {{ remoteData.date }}
                </div>
            </div>
        </b-link>
    </div>
</template>

<script>
module.exports = {
    name: 'Remote34Card',
    mixins: [remoteComponentMixin, remoteCardsMixin, sizableComponentMixin],
    props: {
        card: Object,
        withSidebar: Boolean,
    },
    data() {
        return {
            defaultSize: 'col-lg-6',
        }
    },
    methods: {
        getNewsContent(data) {
            return {
                link: this.getLink(data),
                linkTarget: this.card.linkTarget,
                title: this.getTitle(data),
                gradient: this.getRemoteGradientClass(data.acf.filter),
                date: this.formatDate(data.date),
            }
        }
    },
};
</script>

<style lang="stylus">
#app
    .remote34Card
        margin-bottom 30px
        &-content
            background-color #ffffff
            box-shadow 0 0 20px rgba(0, 0, 0, 0.2)
            transition all .3s
            &:hover
                text-decoration none
                box-shadow 0px 0px 20px rgba(0, 0, 0, 0.2), 0px 0px 30px rgba(0, 0, 0, 0.25)
                .remote34Card-content-img
                    img
                      transform scale(1.1)
                .remote34Card-content-info-text-title
                    color #00ADEF
                .remote34Card-content-info-text-link
                    color #00ADEF
            &-img
                overflow hidden
                height 327px
                min-height 327px
                @media (max-width 575px)
                    height 318px
                    min-height 318px
                img
                    transition all .3s
                    width 100%
                    height 100%
                    object-fit cover
            &-info
                &-text
                    padding 16px 20px
                    color #3C3C3C
                    line-height 150%
                    font-weight normal
                    font-size 16px
                    @media (max-width 575px)
                        font-size 14px
                    &-news
                        a
                            color #1E7FB8
                    &-title
                        color #1E7FB8
                        line-height 120%
                        font-size 18px
                        margin-bottom 10px
                &-date
                    padding 0 20px 20px
                    color #808080
                    line-height 150%
                    font-weight normal
                    font-size 14px
                    @media (max-width 575px)
                        font-size 12px
</style>
