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

    <div class="q-pa-sm">
        <div class="text-h5 q-pb-md">
            Course Progress
        </div>
        <div class="row">
            <div class="col-12 col-md-12">
                <q-card class="my-card">
                    <div class="q-pa-md">Showing progress report of active courses.</div>
                    <q-markup-table flat>
                        <thead>
                            <tr>
                                <th class="text-left">COURSE NAME</th>
                                <th class="text-left">DATE STARTED</th>
                                <th class="text-left">STATUS</th>
                                <th class="text-center">ACTION</th>
                            </tr>
                        </thead>
                        <tbody v-for="n in 5" :key=n>
                            <tr>
                                <td class="text-left">Dental Guide</td>
                                <td class="text-left">Mon, Jan 15, 2020</td>
                                <td class="text-leftt">
                                    <q-badge v-if="Math.random() > 0.5" class="q-pa-xs" color="secondary">Started</q-badge>
                                    <q-badge v-else class="q-pa-xs" color="warning">Pending</q-badge>
                                </td>
                                <td class="text-center">
                                        <a href="/#/progress-review" class="no-underline text-blue-5 hoverable cursor-pointer">Show Progrss</a>
                                </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="#" @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;
}
.no-underline {
    text-decoration: none;
}
.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>
