<template>
    <v-card flat>
        <v-container bg grid-list-md>
            <v-layout row wrap align-center>
                <v-flex>
                    <v-img
                        v-if="authorImg !== ''"
                        :src="authorImg"
                        height="55px"
                        width="55px"
                        contain
                        class="author-image ml-2"
                    >
                    </v-img>
                    <div
                        class="author-name font-weight-black"
                    >
                        {{ authorName }}
                    </div>
                </v-flex>
            </v-layout>
        </v-container>

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

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

        methods: {
            bookClick (val) {
                this.$emit("book_selected", val);
            }
        }
    }
</script>

<style>
    .author-image {
        display: inline-block;
        border-radius: 55px;
    }

    .author-name {
        display: inline-block;
        position: absolute;
        margin: 15px;
    }

    .books-layout { min-height: calc(100vh - 250px); }
</style>
