<script setup lang="ts">
import { ref } from 'vue';
/*import tabler icons*/
import { DeviceLaptopIcon, DeviceMobileIcon, DotsVerticalIcon } from 'vue-tabler-icons';
</script>
<template>
    <v-card elevation="10" >
        <v-row class="ma-sm-n2 ma-n1">
            <v-col cols="12" md="8">
                <v-card variant="outlined">
                    <v-card-item>
                        <h4 class="text-h4">Two-factor Authentication</h4>
                        <div class="d-sm-flex justify-space-between mt-4 mb-8">
                            <div class="text-subtitle-1 textSecondary text-13 pr-5">
                                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis sapiente sunt earum officiis laboriosam
                                ut.
                            </div>
                            <v-btn color="primary" class="mt-sm-0 mt-3" flat>Enable</v-btn>
                        </div>
                        <v-divider></v-divider>
                        <div class="d-flex justify-space-between my-4">
                            <div>
                                <h6 class="text-h6 mb-1">Authentication App</h6>
                                <p class="text-body-1 textSecondary">Google auth app</p>
                            </div>
                            <v-btn class="bg-lightprimary text-primary" flat>Setup</v-btn>
                        </div>
                        <v-divider></v-divider>
                        <div class="d-flex justify-space-between my-4">
                            <div>
                                <h6 class="text-h6 mb-1">Another e-mail</h6>
                                <p class="text-body-1 textSecondary">E-mail to send verification link</p>
                            </div>
                            <v-btn class="bg-lightprimary text-primary" flat>Setup</v-btn>
                        </div>
                        <v-divider></v-divider>
                        <div class="d-flex justify-space-between my-4">
                            <div>
                                <h6 class="text-h6 mb-1">SMS Recovery</h6>
                                <p class="text-body-1 textSecondary">Your phone number or something</p>
                            </div>
                            <v-btn class="bg-lightprimary text-primary" flat>Setup</v-btn>
                        </div>
                    </v-card-item>
                </v-card>
            </v-col>
            <v-col cols="12" md="4">
                <v-card variant="outlined">
                    <v-card-item>
                        <v-avatar size="48" class="" rounded="md" color="lightprimary">
                            <DeviceLaptopIcon class="text-primary" size="25" />
                        </v-avatar>
                        <h5 class="text-h5 mt-4">Devices</h5>
                        <div class="text-subtitle-1 mt-3 textSecondary text-10">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit Rem.
                        </div>
                        <v-btn color="primary" class="mt-4" flat>Sign out from all devices</v-btn>
                        <div class="mt-sm-8 mt-5">
                            <div class="d-flex gap-3 align-center my-4">
                                <v-avatar size="30" rounded="md" color="surface">
                                    <DeviceMobileIcon size="25" />
                                </v-avatar>
                                <div class="">
                                    <h6 class="text-h6 mb-1">iPhone 14</h6>
                                    <p class="text-body-1 textSecondary">London UK, Oct 23 at 1:15 AM</p>
                                </div>
                                <v-btn size="30" icon variant="flat" class="lightprimary ms-auto">
                                    <v-avatar size="20">
                                        <DotsVerticalIcon />
                                    </v-avatar>
                                </v-btn>
                            </div>
                            <v-divider></v-divider>
                            <div class="d-flex gap-3 align-center my-4">
                                <v-avatar size="30" rounded="md" color="surface">
                                    <DeviceLaptopIcon size="25" />
                                </v-avatar>
                                <div class="">
                                    <h6 class="text-h6 mb-1">Macbook Air</h6>
                                    <p class="text-body-1 textSecondary">Gujarat India, Oct 24 at 3:15 AM</p>
                                </div>
                                <v-btn size="30" icon variant="flat" class="lightprimary ms-auto">
                                    <v-avatar size="20">
                                        <DotsVerticalIcon />
                                    </v-avatar>
                                </v-btn>
                            </div>
                        </div>
                        <v-btn color="primary" variant="tonal" class=" mt-5" block flat>Need Help?</v-btn>
                    </v-card-item>
                </v-card>
            </v-col>
        </v-row>
        <div class="d-flex justify-end mt-5">
            <v-btn  color="primary" class="mr-4" flat>Save</v-btn>
            <v-btn  class="bg-lighterror text-error" flat>Cancel</v-btn>
        </div>
    </v-card>
</template>
