<script setup>
const breadcrums = [
    {
        title: 'Category',
        disabled: false,
        to: 'category',
    },
    {
        title: 'Groups',
        disabled: true,
    },
];
</script>

<template>
    <VRow>
        <v-breadcrumbs :items="breadcrums" class="text-primary pt-0 pb-0">
            <template v-slot:divider style="padding-top:0px; padding-bottom:0px">
                <v-icon icon="mdi-chevron-right" style="padding-top:0px;"></v-icon>
            </template>
        </v-breadcrumbs>
        <VCol cols="12" md="12" style="padding-top:0px;">
            <VRow class="justify-space-between pb-0">
                <VCol class="pb-0">
                    <VCardTitle class="text-primary pl-0 pb-0">
                        <b>
                            Groups
                        </b>
                    </VCardTitle>


                </VCol>
            </VRow>
        </VCol>
        <VCol cols="12">
            <VCard>
                <VCardTitle class="text-primary">
                    <RouterLink to="/group-question"><b>Medical History</b></RouterLink>
                </VCardTitle>

                <VCardText>
                    <p><b>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                            printer took a galley of type and scrambled it to make a type .</b></p>
                </VCardText>
                <VCardText>
                    <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                        printer took a galley of type and scrambled it to make a type .</p>
                </VCardText>

                <VCardText>
                    <VRow>
                        <VCol class="border-end text-center">
                            <h3>17</h3>
                            <p class="">Total questions</p>
                        </VCol>
                        <VDivider class="bold-divider" vertical />

                        <VCol class=" border-end text-center">
                            <h3>17</h3>
                            <p class="">Answered Questions</p>
                        </VCol>
                        <VDivider class="bold-divider" vertical />
                        <VCol class="text-center">
                            <h3>100</h3>
                            <p class="">Average %</p>
                        </VCol>
                    </VRow>
                </VCardText>

            </VCard>
        </VCol>

    </VRow>
</template>
<style lang="scss">
.bold-divider::after {
    content: '';
    border-right: 1px solid black;
    /* Adjust thickness and color as needed */
}
</style>
