<template>
    <div>
        <v-container>
            <v-carousel cycle show-arrows-on-hover class="rounded">
                <v-carousel-item
                    v-for="(item,i) in slider"
                    :key="i"
                    :src="item.src"
                    reverse-transition="fade-transition"
                    transition="fade-transition"
                ></v-carousel-item>
            </v-carousel>

            <v-card>
                <v-card-actions class="justify-center" style="margin-top: 40px;">
                    <v-btn to="/gallery">Click here to view gallery</v-btn>
                </v-card-actions>
            </v-card>
            <div style="padding: 0 40px;">
                <v-row>
                    <v-col v-for="card in gallery" :key="card.title" sm2 md2 lg1>
                        <v-card>
                            <v-img :src="card.src" class="white--text align-end" height="300px">
                                <v-card-title v-text="card.title"></v-card-title>
                            </v-img>
                            <v-card-actions>
                            <v-btn icon :href="card.src">
                                <v-icon>mdi-bookmark</v-icon>
                            </v-btn>
                            <v-btn
                                icon
                                :href="`https://wa.me/?text=Gita Enterprise.%20https://gita-enterprise.com/products`"
                            >
                                <v-icon>mdi-share-variant</v-icon>
                            </v-btn>
                            <v-btn>
                                <div
                                    class="fb-like"
                                    data-href="https://gita-enterprise.com/products"
                                    data-width
                                    data-layout="standard"
                                    data-action="like"
                                    data-size="small"
                                    data-share="true"
                                ></div>
                            </v-btn>
                        </v-card-actions>
                        </v-card>
                    </v-col>
                </v-row>
            </div>

            <v-card>
                <v-card-actions class="justify-center" style="margin-top: 40px;">
                    <v-btn to="/products">Click here to view Products</v-btn>
                </v-card-actions>
            </v-card>
            <div style="padding: 0 40px;">
                <v-row>
                    <v-col v-for="card in products" :key="card.title" sm2 md2 lg2>
                        <v-card>
                            <v-img
                                :src="card.src"
                                class="white--text align-end"
                                style="height:300px"
                            >
                                <v-card-title v-text="card.title"></v-card-title>
                            </v-img>
                            <v-card-actions>
                                <v-spacer></v-spacer>

                                <v-btn icon :href="card.src">
                                    <v-icon>mdi-bookmark</v-icon>
                                </v-btn>

                                <v-btn
                                    icon
                                    :href="`https://wa.me/?text=Gita Enterprise.%20https://gita-enterprise.com`"
                                >
                                    <v-icon>mdi-share-variant</v-icon>
                                </v-btn>
                            </v-card-actions>
                        </v-card>
                    </v-col>
                </v-row>
            </div>

            <v-img
                style="border-radius: 8px;"
                src="/Assets/gallery/2.jpeg"
                class="white--text align-end"
                height="700px"
            >
                <v-card-title>Main Outlet</v-card-title>
            </v-img>
        </v-container>
    </div>
</template>
<script>
export default {
    data() {
        return {
            slider: [
                {
                    src: '/img/cake-close-up.jpg',
                },
                {
                    src: '/Assets/gallery/bakery-products.jpg',
                },
                {
                    src: '/Assets/gallery/7.jpeg',
                },
                {
                    src: '/Assets/gallery/2.jpeg'
                },
            ],
            products: [
                { title: 'GEL COLOUR', src: '/gita/cake gel.jpeg', flex: 3 },
                { title: 'COLOUR SPALASH', src: '/gita/colour splash.jpg', flex: 3 },
                { title: 'COLOUR MIST', src: '/gita/colourmist.jpg', flex: 3 },
                { title: 'GEL COLOUR', src: 'gita/gel colour.jpg', flex: 3 },
            ],
            gallery: [

                { src: '/Assets/gallery/5.jpeg', title: 'Stock Rack 1 & 2' },
                { src: '/Assets/gallery/6.jpeg', title: 'Natural colour stock' },
            ]
        }
    },
}
</script>
