<template>
    <v-row justify="center">
        <v-col cols="12">
            <v-img
                lazy-src="https://picsum.photos/id/11/10/6"
                max-height="40%"
                max-width="100%"
                src="/gita/t.jpg"
            ></v-img>
            <v-form v-model="valid">
                <v-container>
                    <v-row>
                        <v-flex xs6 style="padding: 20px;">
                            <div>
                                <v-card style="padding: 10px;">
                                    <v-card-title class="cyan darken-1">
                                        <span class="text-h5 white--text">Request information</span>

                                        <v-spacer></v-spacer>
                                        <!-- 
                                        <v-btn dark icon>
                                            <v-icon>mdi-chevron-left</v-icon>
                                        </v-btn>

                                        <v-btn dark icon>
                                            <v-icon>mdi-pencil</v-icon>
                                        </v-btn>-->

                                        <v-btn dark icon>
                                            <v-icon>mdi-dots-vertical</v-icon>
                                        </v-btn>
                                    </v-card-title>
                                    <v-text-field
                                        v-model="firstname"
                                        :rules="nameRules"
                                        :counter="10"
                                        label="First name"
                                        required
                                    ></v-text-field>

                                    <v-text-field
                                        v-model="lastname"
                                        :rules="nameRules"
                                        :counter="10"
                                        label="Last name"
                                        required
                                    ></v-text-field>

                                    <v-text-field
                                        v-model="email"
                                        :rules="emailRules"
                                        label="E-mail"
                                        required
                                    ></v-text-field>
                                    <v-text-field
                                        v-model="Massege"
                                        :rules="massegeRules"
                                        label="Massege"
                                        required
                                    ></v-text-field>
                                    <v-btn elevation="3" medium denger>submit</v-btn>
                                </v-card>
                            </div>
                        </v-flex>
                        <v-flex xs6 style="padding: 20px;">
                            <v-card style="padding: 10px;">
                                <v-card-title class="cyan darken-1">
                                    <span class="text-h5 white--text">Contact information</span>

                                    <v-spacer></v-spacer>
                                    <!-- 
                                        <v-btn dark icon>
                                            <v-icon>mdi-chevron-left</v-icon>
                                        </v-btn>

                                        <v-btn dark icon>
                                            <v-icon>mdi-pencil</v-icon>
                                    </v-btn>-->

                                    <v-btn dark icon>
                                        <v-icon>mdi-dots-vertical</v-icon>
                                    </v-btn>
                                </v-card-title>

                                <v-list>
                                    <v-list-item>
                                        <v-list-item-action>
                                            <v-icon>mdi-phone</v-icon>
                                        </v-list-item-action>

                                        <v-list-item-content>
                                            <v-list-item-title>098302 96155</v-list-item-title>
                                        </v-list-item-content>
                                        <v-list-item-action>
                                            <v-icon>mdi-message-text</v-icon>
                                        </v-list-item-action>
                                    </v-list-item>

                                    <v-divider inset></v-divider>

                                    <v-divider inset></v-divider>

                                    <v-list-item>
                                        <v-list-item-action>
                                            <v-icon>mdi-email</v-icon>
                                        </v-list-item-action>

                                        <v-list-item-content>
                                            <v-list-item-title>dipak@gita-enterprise.com</v-list-item-title>
                                        </v-list-item-content>
                                    </v-list-item>

                                    <v-divider inset></v-divider>

                                    <v-list-item>
                                        <v-list-item-action>
                                            <v-icon>mdi-map-marker</v-icon>
                                        </v-list-item-action>

                                        <v-list-item-content>
                                            <v-list-item-title>HABRA BAZZAR, 1 NO GOL <br><br> Habra, West Bengal 743263 <br><br> West Bengal, India <br><br> </v-list-item-title>
                                        </v-list-item-content>
                                    </v-list-item>
                                </v-list>
                            </v-card>
                        </v-flex>
                    </v-row>
                    
                </v-container>
            </v-form>
        </v-col>
    </v-row>
</template>
<script>
export default {
    data: () => ({
        valid: false,
        firstname: '',
        lastname: '',
        nameRules: [
            v => !!v || 'Name is required',
            v => v.length <= 10 || 'Name must be less than 10 characters',
        ],
        email: '',
        emailRules: [
            v => !!v || 'E-mail is required',
            v => /.+@.+/.test(v) || 'E-mail must be valid',
        ],
        Massege: ' ',
        massegeRules: [v => !!v || 'E-mail is required',
        v => /.+@.+/.test(v) || 'E-mail must be valid',],
    }),
}
</script>
