<template>
    <b-col cols="12" lg="3" class="socialIconsBlock">
        <b-link
            class="socialIconsBlock-item"
            v-if="links.twitter"
            :href="links.twitter"
            target="_blank"
        >
            <img
                class="twitter"
                alt="twitter"
            >
        </b-link>
        <b-link
            class="socialIconsBlock-item"
            v-if="links.facebook"
            :href="links.facebook"
            target="_blank"
        >
            <img
                class="facebook"
                alt="facebook"
            >
        </b-link>
        <b-link
            class="socialIconsBlock-item"
            v-if="links.instagram"
            :href="links.instagram"
            target="_blank"
        >
            <img
                class="instagram"
                alt="instagram"
            >
        </b-link>
        <b-link
            class="socialIconsBlock-item"
            v-if="links.youtube"
            :href="links.youtube"
            target="_blank"
        >
            <img
                class="youtube"
                alt="youtube"
            >
        </b-link>
        <b-link
            class="socialIconsBlock-item"
            v-if="links.linkedin"
            :href="links.linkedin"
            target="_blank"
        >
            <img
                class="linkedin"
                alt="linkedin"
            >
        </b-link>
        <b-link
            class="socialIconsBlock-item"
            v-if="links.email"
            :href="links.email"
            target="_blank"
        >
            <img
                class="mail"
                alt="email"
            >
        </b-link>
        <b-link
            class="socialIconsBlock-item"
            v-if="links.rss"
            :href="links.rss"
            target="_blank"
        >
            <img
                class="rss"
                alt="rss"
            >
        </b-link>
        <div
            class="socialIconsBlock-item"
            onclick="window.print();"
        >
            <img
                class="print"
                alt="print"
            >
        </div>
    </b-col>
</template>

<script>
module.exports = {
    name: 'SocialIconsBlock',
    props: {
        links: Object,
    },
}
</script>

<style lang="stylus">
#app
    .socialIconsBlock
        display flex
        justify-content flex-end
        align-items flex-end
        &-item
            width 30px
            height 30px
            cursor pointer
            img
                object-fit cover
            .twitter
                content url('/img/social_panel/twitter.svg')
            .twitter:hover
                content url('/img/social_panel/twitter_active.svg')
            .facebook
                content url('/img/social_panel/facebook.svg')
            .facebook:hover
                content url('/img/social_panel/facebook_active.svg')
            .instagram
                content url('/img/social_panel/instagram.svg')
            .instagram:hover
                content url('/img/social_panel/instagram_active.svg')
            .youtube
                content url('/img/social_panel/youtube.svg')
            .youtube:hover
                content url('/img/social_panel/youtube_active.svg')
            .rss
                content url('/img/social_panel/rss.svg')
            .rss:hover
                content url('/img/social_panel/rss_active.svg')
            .linkedin
                content url('/img/social_panel/linkedin.svg')
            .linkedin:hover
                content url('/img/social_panel/linkedin_active.svg')
            .mail
                content url('/img/social_panel/mail.svg')
            .mail:hover
                content url('/img/social_panel/mail_active.svg')
            .print
                content url('/img/social_panel/print.svg')
            .print:hover
                content url('/img/social_panel/print_active.svg')
</style>
