<template>
    <div class="docksCard col-12" :class="sizeClass">
        <div class="docksCard-content d-flex justify-content-start flex-column">
            <b-link
                class="docksCard-content-item d-flex align-items-start justify-content-start"
                :href="dock.link" :class="{'withLine': dock.withLine}"
                v-for="(dock, index) of docks"
                :key="index"
                :target="dock.linkTarget"
            >
                <div class="docksCard-content-item-icon d-flex">
                    <img :src="dock.icon" alt="" v-if="dock.icon">
                </div>
                <div class="docksCard-content-item-deck d-flex flex-wrap align-items-start">
                    <div class="docksCard-content-item-name">
                        {{dock.name}}
                        <span class="docksCard-content-item-data">
                            {{dock.data}}
                        </span>
                    </div>
                </div>
            </b-link>
        </div>
    </div>
</template>

<script>
module.exports = {
    name: 'DocksCard',
    mixins: [sizableComponentMixin],
    props: {
        docks: Array,
        withSidebar: Boolean,
    },
};
</script>

<style lang="stylus">
#app
    .docksCard
        margin-bottom 30px
        &-content
            background-color #ffffff
            box-shadow 0 0 20px rgba(0, 0, 0, 0.2)
            &:hover
                box-shadow 0px 0px 20px rgba(0, 0, 0, 0.2), 0px 0px 30px rgba(0, 0, 0, 0.25)
            &-item
                padding 0 20px 16px
                &:hover
                    text-decoration none
                &:first-child
                    padding-top 20px
                &-icon
                    position relative
                    top 4px
                    margin-right 10px
                &-deck
                    font-size 16px
                    line-height 150%
                    @media (max-width 575px)
                        font-size 14px
                &-name
                    color #1E7FB8
                    margin-right 5px
                &-data
                    white-space nowrap
                    color #808080
                &.withLine
                    border-bottom 1px solid #E3F4FE
                    margin-bottom 16px
</style>
