<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 Groups
    </div>
<div class="row">
        <div class="col-12 col-md-12">
            <q-card class="my-card">
                    <q-markup-table>
                        <thead>
                            <tr>
                                <th class="text-left">GROUP NAME</th>
                                <th class="text-right">DATE STARTED</th>
                                <th class="text-right">STATUS</th>
                                <th class="text-right">ACTION</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-left">Dental Guide</td>
                                <td class="text-right">2019-08-03</td>
                                <td class="text-right">
                                    <q-badge class="q-pa-xs" color="secondary" >Started</q-badge></td>
                                <td class="text-right">
                                    <a href="/#/tg-details">View Details</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-left">Clinical Surgery</td>
                                <td class="text-right">2019-08-03</td>
                                <td clickable class="text-right"><q-badge class="q-pa-xs" color="negative" >Inactive</q-badge></td>
                                <td class="text-right">
                                    <a href="/#/tg-details">View Details</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-left">Clinical Surgery</td>
                                <td class="text-right">2019-08-03</td>
                                <td class="text-right"><q-badge class="q-pa-xs" color="warning" >Panding</q-badge></td>
                                <td class="text-right">
                                    <a href="/#/tg-details">View Details</a>
                                </td>
                            </tr>
                        </tbody>
                    </q-markup-table>
                </q-card>

        </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>
