<template>
    <v-card
        flat
        tile
        color="rgba(0, 0, 0, 0)"
        class="d-flex align-content-start flex-wrap content-container mx-0 pt-2 px-2"
    >
        <v-row no-gutters>
            <v-col
                v-for="(item, index) in $store.getters.authors"
                :key="index"
                cols="12"
                sm="6"
                md="4"
                lg="3"
                xl="2"
            >
                <v-card
                    hover
                    ripple
                    outlined
                    tile
                    height="127"
                    class="pa-2 ma-2"
                    @click="authorClick(item)"
                >
                    <v-row
                        no-gutters
                        style="flex-wrap: nowrap;"
                    >
                        <v-col
                            cols="5"
                            style="min-width: 127px; max-width: 127px;"
                            class="flex-grow-0 flex-shrink-0"
                        >
                            <v-img
                                :src="item.image"
                                height="95px"
                                width="95px"
                                contain
                                class="author-image ma-2"
                            >
                            </v-img>
                        </v-col>
                        <v-col
                            cols="1"
                            class="flex-grow-1 flex-shrink-0"
                            style="min-width: 80px; max-width: 100%"
                        >
                            <div class="author-name">
                                <span class=" text-center font-weight-medium">{{ item.author }}</span>
                            </div>
                        </v-col>
                    </v-row>
                </v-card>
            </v-col>
        </v-row>
    </v-card>
</template>

<script>
    export default {
        name: "AuthorsLib",

        data: () => ({
        }),

        methods: {
            authorClick (author) {
                this.$emit("authorSelected", author);
            }
        }
    }
</script>

<style lang="sass" scoped>
    .author
        &-image
            border-radius: 125px
            border: solid #fff 2px
            box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12)
        &-name
            height: 100%
            line-height: 100px
            text-align: center
            > span
                display: inline-block
                vertical-align: middle
                line-height: normal
</style>
