<template>
<transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">

    <div class="q-pa-sm">
        <div class="text-h5 q-pb-md">
            My Classroom
        </div>
        <div class="row flex flex-center">
            <div class="col-12 col-md-12">
                <div class="q-pa-mdd">
                    <q-card class="my-card">
                        <q-markup-table>
                            <thead>
                                <tr>
                                    <th class="text-left">COURSE NAME</th>
                                    <th class="text-right">DAYS &amp; TIMING</th>
                                    <th class="text-right">ACTION</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="text-left">Dental Guide</td>
                                    <td class="text-right">
                                        <div v-for="n in 5" :key="n">Friday - 19:57:00 to 21:00:00</div>
                                    </td>
                                    <td class="text-right">
                                        <a href="/#/tutor/class-details" class="text-blue-5 hoverable cursor-pointer">Enter Classroom</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-left">Clinical Surgery</td>
                                    <td class="text-right">
                                        <div v-for="n in 1" :key="n">Friday - 19:57:00 to 21:00:00</div>

                                    </td>
                                    <td class="text-right">
                                        <a href="/#/tutor/class-details" class="text-blue-5 hoverable cursor-pointer">Enter Classroom</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-left">Clinical Surgery</td>
                                    <td class="text-right">
                                        <div v-for="n in 2" :key="n">Friday - 19:57:00 to 21:00:00</div>
                                    </td>
                                    <td class="text-right">
                                        <a href="/#/tutor/class-details" class="text-blue-5 hoverable cursor-pointer">Enter Classroom</a>
                                    </td>
                                </tr>
                            </tbody>
                        </q-markup-table>
                    </q-card>
                </div>
            </div>
        </div>
    </div>

</transition>
</template>

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

        }
    }
}
</script>

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

.show {
    display: inline;
}

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

a {
    text-decoration: none;
    color: #04b1ed;
    font-weight: 400;

}

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