<template>
    <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    
<div class="q-pa-sm">
    <div class="text-h5 q-pb-md">
        Tutoring Group Details
    </div>
    <div class="row">
        <div class="col-12 col-md-12">
            <q-card>
                <q-list bordered class="q-mb-md q-py-md">
                    <q-item dense>
                        <q-item-section class="text-bold">Group Name :</q-item-section>
                        <q-item-section>Dental Guide</q-item-section>
                    </q-item>
                    <q-item dense>
                        <q-item-section class="text-bold">Students :</q-item-section>
                        <q-item-section>M. Asim Khan , abc ab , fdd dfd</q-item-section>
                    </q-item>
                    <q-item dense>
                        <q-item-section class="text-bold">Nature :</q-item-section>
                        <q-item-section>One On One</q-item-section>
                    </q-item>
                    <q-item dense>
                        <q-item-section class="text-bold">Start Date :</q-item-section>
                        <q-item-section>12-06-2020</q-item-section>
                    </q-item>
                    <q-item dense>
                        <q-item-section class="text-bold">Mode :</q-item-section>
                        <q-item-section>Live Online</q-item-section>
                    </q-item>
                </q-list>
            </q-card>
            <div class="text-h5 q-pb-md">
                Assigned test performence report
            </div>
            <div class="shadow-2 q-mb-md">
                <q-list bordered separator class="rounded-borders">
                    <q-expansion-item expand-separator label="Test 1" default-opened class="bg-grey-2">
                        <q-card>
                            <q-markup-table>
                                    <thead>
                                        <tr>
                                            <th class="text-left">STUDENTS</th>
                                            <th class="text-right">CORRECT</th>
                                            <th class="text-right">INCORRECT</th>
                                            <th class="text-right">UNATTEMPTED</th>
                                            <th class="text-right">SCORE</th>
                                            <th class="text-right">STATUS</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="text-left">Asim Khan</td>
                                            <td class="text-right">23</td>
                                            <td class="text-right">12</td>
                                            <td class="text-right">05</td>
                                            <td class="text-right">63%</td>
                                            <td class="text-right">
                                                <q-badge class="q-pa-xs" color="secondary">Completed</q-badge>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-left">Asim Khan</td>
                                            <td class="text-right">23</td>
                                            <td class="text-right">12</td>
                                            <td class="text-right">05</td>
                                            <td class="text-right">63%</td>
                                            <td class="text-right">
                                                <q-badge class="q-pa-xs" color="secondary">Completed</q-badge>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-left">Asim Khan</td>
                                            <td class="text-right">23</td>
                                            <td class="text-right">12</td>
                                            <td class="text-right">05</td>
                                            <td class="text-right">63%</td>
                                            <td class="text-right">
                                                <q-badge class="q-pa-xs" color="secondary">Completed</q-badge>
                                            </td>
                                        </tr>
                                    </tbody>
                                </q-markup-table>
                        </q-card>
                    </q-expansion-item>

                    <q-expansion-item expand-separator label="Test 2" class="bg-grey-2">
                        <q-card>
                             <q-markup-table>
                                    <thead>
                                        <tr>
                                            <th class="text-left">STUDENTS</th>
                                            <th class="text-right">CORRECT</th>
                                            <th class="text-right">INCORRECT</th>
                                            <th class="text-right">UNATTEMPTED</th>
                                            <th class="text-right">SCORE</th>
                                            <th class="text-right">STATUS</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="text-left">Asim Khan</td>
                                            <td class="text-right">23</td>
                                            <td class="text-right">12</td>
                                            <td class="text-right">05</td>
                                            <td class="text-right">63%</td>
                                            <td class="text-right">
                                                <q-badge class="q-pa-xs" color="secondary">Completed</q-badge>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-left">Asim Khan</td>
                                            <td class="text-right">23</td>
                                            <td class="text-right">12</td>
                                            <td class="text-right">05</td>
                                            <td class="text-right">63%</td>
                                            <td class="text-right">
                                                <q-badge class="q-pa-xs" color="secondary">Completed</q-badge>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-left">Asim Khan</td>
                                            <td class="text-right">23</td>
                                            <td class="text-right">12</td>
                                            <td class="text-right">05</td>
                                            <td class="text-right">63%</td>
                                            <td class="text-right">
                                                <q-badge class="q-pa-xs" color="secondary">Completed</q-badge>
                                            </td>
                                        </tr>
                                    </tbody>
                                </q-markup-table>
                        </q-card>
                    </q-expansion-item>

                    <q-expansion-item expand-separator label="Test 3" class="bg-grey-2">
                        <q-card>
                              <q-markup-table>
                                    <thead>
                                        <tr>
                                            <th class="text-left">STUDENTS</th>
                                            <th class="text-right">CORRECT</th>
                                            <th class="text-right">INCORRECT</th>
                                            <th class="text-right">UNATTEMPTED</th>
                                            <th class="text-right">SCORE</th>
                                            <th class="text-right">STATUS</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td class="text-left">Asim Khan</td>
                                            <td class="text-right">23</td>
                                            <td class="text-right">12</td>
                                            <td class="text-right">05</td>
                                            <td class="text-right">63%</td>
                                            <td class="text-right">
                                                <q-badge class="q-pa-xs" color="secondary">Completed</q-badge>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-left">Asim Khan</td>
                                            <td class="text-right">23</td>
                                            <td class="text-right">12</td>
                                            <td class="text-right">05</td>
                                            <td class="text-right">63%</td>
                                            <td class="text-right">
                                                <q-badge class="q-pa-xs" color="secondary">Completed</q-badge>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-left">Asim Khan</td>
                                            <td class="text-right">23</td>
                                            <td class="text-right">12</td>
                                            <td class="text-right">05</td>
                                            <td class="text-right">63%</td>
                                            <td class="text-right">
                                                <q-badge class="q-pa-xs" color="secondary">Completed</q-badge>
                                            </td>
                                        </tr>
                                    </tbody>
                                </q-markup-table>
                        </q-card>
                    </q-expansion-item>
                </q-list>
            </div>
        </div>
    </div>
</div>
    </transition>

</template>

<script>
export default {
    data() {
        return {

        }
    },
}
</script>

<style lang="css" scoped>
.hide {
    display: none;
}

a {
    text-decoration: none;
    color: #04b1ed;
}

.show {
    display: inline;
}

.hoverable:hover {
    filter: grayscale(100%);
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
    .hide {
        display: inline;
    }

    .show {
        display: none;
    }
}

@media only screen and (min-width: 899px) and (max-width: 1280px) {}
</style>
