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

    <div class="q-pa-sm">
        <div class="text-h5 q-pb-md">
            Manage Course
        </div>
        <div class="row">
            <div class="col-12 col-md-12">
                <q-card class="my-card">
                    <q-markup-table flat>
                        <thead>
                            <tr>
                                <th class="text-left">SERIAL</th>
                                <th class="text-right">COURSE NAME</th>
                                <th class="text-right">START DATE</th>
                                <th class="text-right">STATUS</th>
                                <th class="text-right">ACTION</th>
                            </tr>
                        </thead>
                        <tbody v-for="n in 5" :key=n>
                            <tr>
                                <td class="text-left">{{n}}</td>
                                <td class="text-right">Dental Guide</td>
                                <td class="text-right">Mon, Jan 15, 2020</td>
                                <td class="text-right">
                                    <q-badge v-if="Math.random() > 0.5" class="q-pa-xs" color="secondary">Approved</q-badge>
                                    <q-badge v-else class="q-pa-xs" color="warning">Pending</q-badge>
                                </td>
                                <td class="text-right">
                                    <q-btn flat dense round to='/tutor/course-details'>
                                        <q-icon size="sm" class="text-blue hoverable cursor-pointer" name="visibility">
                                        </q-icon>
                                    </q-btn>
                                    <q-btn flat dense round  to="/tutor/offer-course">
                                        <q-icon clickable size="sm" class="text-green hoverable cursor-pointer" name="edit" />
                                    </q-btn>
                                    <q-btn flat dense round to="/tutor/progress-review">
                                        <q-icon clickable size="sm" class="text-orange hoverable cursor-pointer" name="pie_chart" />
                                    </q-btn>
                                    
                                </td>

                            </tr>
                            <q-separator style="width:0%" inset />

                        </tbody>
                    </q-markup-table>
                </q-card>

            </div>
        </div>
        <q-dialog
      v-model="medium"
    >
      <q-card style="width: 700px; max-width: 80vw;">
        <q-card-section>
          <div class="text-h6 text-center">Course Edit Alert</div>
        </q-card-section>

        <q-card-section class="q-pt-none text-orange text-center bg-red-1 q-pa-md q-ma-md">
            Course is approved therefore, modification is disabled.For any modification you may <a href="/#/contact" @click="medium = true">contact us</a>
        </q-card-section>

        <q-card-actions align="center" class="bg-white text-teal">
          <q-btn outline label="Close" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>
    </div>

</transition>
</template>

<script>
export default {
    data() {
        return {
            stdname: '',
            medium: false,
        }
    },
}
</script>

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

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