<template>
    <div>
        <v-card flat>
            <v-container
                fluid
                grid-list-lg
                pb-5
                class="authors-container"
            >
                <v-layout row wrap pb-5>
                    <v-flex
                        v-for="(item, index) in items"
                        v-bind:key="index"
                        xs12 sm5 md3 lg2
                        my-1
                    >
                        <v-card
                            hover
                            ripple
                            @click="authorClick(item)"
                        >
                            <v-layout>
                                <v-flex xs5>
                                    <v-img
                                        :src="item.image"
                                        height="95px"
                                        width="95px"
                                        contain
                                        class="author-image ml-2"
                                    >
                                    </v-img>
                                </v-flex>
                                <v-flex xs7>
                                    <v-card-title>
                                        <div>
                                            <div>{{ item.author }}</div>
                                        </div>
                                    </v-card-title>
                                </v-flex>
                            </v-layout>
                        </v-card>
                    </v-flex>
                </v-layout>
            </v-container>
        </v-card>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                items: []
            }
        },

        methods: {
            authorClick (val) { this.$emit("author_selected", val); }
        }
    }
</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)

    .authors-container
        min-height: calc(100vh - 190px)
</style>
