<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 Details
        </div>
        <div class="row">
            <div class="col-12 col-md-12">
                <q-banner class="bg-light-green-1 q-ma-sm">
                    <template v-slot:avatar>
                        <q-icon name="report_problem" color="light-green-3" />
                    </template>
                    <div class="text-h6 text-subtitle1 text-bold text-green-9">Course Status</div>
                    <div class="text-caption text-green-9">Course is approved.
                        <a href="#/welcome">For course updation you may contact us</a>
                    </div>
                </q-banner>
            </div>
        </div>
        <div class="q-pa-md q-gutter-sm">
            <q-breadcrumbs>
                <q-breadcrumbs-el icon="home" to="/welcome" />
                <q-breadcrumbs-el label="Manage Course" to="/manage-course" />
                <q-breadcrumbs-el label="Course Details" to="/course-details" />
            </q-breadcrumbs>
        </div>
        <div class="row">
            <div class="col-12 col-md-12 col-sm-6 col-xs-6">
                <q-card class="my-card">
                    <q-card-select>
                        <div class="row q-pa-md">
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Course Name:</div>
                                <div class="text-subtitle1">Dental Guide</div>
                            </div>
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Total Duration:</div>
                                <div class="text-subtitle1">32 Days</div>
                            </div>
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Total credit Hours:</div>
                                <div class="text-subtitle1">158 Hours</div>
                            </div>
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Course Type:</div>
                                <div class="text-subtitle1">Tutor Led Course</div>
                            </div>
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Start Date:</div>
                                <div class="text-subtitle1">2019-08-03</div>
                            </div>
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Last Registration Date:</div>
                                <div class="text-subtitle1">2019-08-27</div>
                            </div>
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Mode:</div>
                                <div class="text-subtitle1">Live Online</div>
                            </div>
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Nature:</div>
                                <div class="text-subtitle1">One on One</div>
                            </div>
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Language:</div>
                                <div class="text-subtitle1">English</div>
                            </div>
                        </div>
                        <div class="row q-px-md">
                            <div class="col-12 col-md-12 col-xs-12 q-pa-sm">
                                <div class="text-bold">Course Details:</div>
                                <div class="">Want to engage and motivate your students? Keen to create authentic and meaningful learning ? Fastest growing list of qualified tutors from globally recognized medical institutions. growing list of qualified tutors from medical institutions.</div>
                            </div>
                            <div class="col-12 col-md-12 col-xs-12 q-pa-sm">
                                <div class="text-bold">Teaching Mode:</div>
                                <div class="">Whether for your own projects or to draw for other people. The Ultimate Drawing Course will show you how to create advanced art that will stand up as professional work. This course will enhance or give you skills in the world of drawing - This course will enhance or give you skills in the world of drawing -This course will enhance or give you skills in the world of drawing - to obtaining drawing skills like you are always knew you should have!</div>
                            </div>
                            <div class="col-12 col-md-12 col-xs-12 q-pa-sm">
                                <div class="text-bold">What Student Will Learn:</div>
                                <div class="">Drawing the human face made easy.</div>
                            </div>
                        </div>
                        <div class="row q-pa-md">
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Total Fee:</div>
                                <div class="text-subtitle1">$1250</div>
                            </div>
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Discount:</div>
                                <div class="text-subtitle1">$ 100</div>
                            </div>
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Course Level:</div>
                                <div class="text-subtitle1">Beginner</div>
                            </div>
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Class Size:</div>
                                <div class="text-subtitle1">NA</div>
                            </div>
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Moke Test:</div>
                                <div class="text-subtitle1">
                                    <q-icon class="text-green text-h5" name="check_circle" />
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">Study Note:</div>
                                <div class="text-subtitle1">
                                    <q-icon class="text-green text-h5" name="check_circle" />
                                </div>
                            </div>
                            <div class="col-6 col-md-4 col-xs-6 q-pa-sm">
                                <div class="text-bold">More Features:</div>
                                <div class="text-subtitle1">Virtual Books</div>
                            </div>
                        </div>
                    </q-card-select>
                    <div class="row q-pa-md">
                        <div class="col-12 col-md-12 col-xs-12 text-h5 q-pa-sm">
                            Course Introductory Video
                        </div>
                        <div class="col-12 col-md-12 col-xs-12 q-pa-md">
                            <q-video :ratio="16/9" src="https://www.youtube.com/embed/P_B-ZZ705zo" />
                        </div>
                    </div>
                    <div class="row q-pa-md">
                        <div class="col-12 col-md-12 col-xs-12 text-h5 q-pa-sm">
                            Course Content
                        </div>
                        <div class="col-12 col-md-12 col-xs-12 text-h5 q-pa-sm">
                            <q-markup-table dense bordered flat>
                                <thead>
                                    <tr>
                                        <th class="text-left">TOPICS</th>
                                        <th class="text-right">SUBTOPICS</th>
                                        <th class="text-right">CREDIT HOURS</th>
                                    </tr>
                                </thead>
                                <tbody v-for="n in 3" :key=n>
                                    <tr>
                                        <td class="text-left">Internal Medicine</td>
                                        <td class="text-right">Dental Guide</td>
                                        <td class="text-right">{{n*10}}</td>
                                    </tr>
                                    <q-separator style="width:0%" inset />
                                </tbody>
                            </q-markup-table>
                        </div>
                    </div>
                       <div class="row q-pa-md">
                        <div class="col-12 col-md-1 col-xs-12 text-h5 q-pa-sm">
                            Course Timings
                        </div>
                        <div class="col-12 col-md-12 col-xs-12 text-h5 q-pa-sm">
                            <q-markup-table dense bordered flat>
                                <thead>
                                    <tr>
                                        <th class="text-left">DAY</th>
                                        <th class="text-right">START TIME</th>
                                        <th class="text-right">END TIME</th>
                                    </tr>
                                </thead>
                                <tbody v-for="n in 4" :key=n>
                                    <tr>
                                        <td class="text-left">{{week[n]}}</td>
                                        <td class="text-right">{{stime[n]}}</td>
                                        <td class="text-right">{{stime[2*n+1]}}</td>
                                    </tr>
                                    <q-separator style="width:0%" inset />
                                </tbody>
                            </q-markup-table>
                        </div>
                    </div>

                </q-card>

            </div>
        </div>
    </div>
 

</transition> 
</template>

<script>
const days = [
    '','Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday',
]
const starttime = [
    '','2020/02/18', '2020/03/22', '2020/02/19', '2020/02/18', '2020/02/18', '2020/04/18', '2019/12/28',
]
export default {
    data() {
        return {
            stdname: '',
            week: days,
            stime: starttime,
           
        }
    },
}
</script>

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

.show {
    display: inline;
}

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

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