<template>
<transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
        <div class="text-h5 q-pb-md">
            Student Testimonials
        </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-card-section>
                            <q-select outlined v-model="model" :options="options" label="Filter by courses" />
                        </q-card-section>
                        <q-card-section class="hoverable q-ma-md" v-for="n in 3" :key="n">
                            <q-banner rounded class="column text-center bg-white ">
                                <template v-slot:avatar>
                                    <q-avatar size="120px">
                                        <img src="statics/photo5.jpg" />
                                    </q-avatar>
                                </template>
                                <q-item>
                                    <q-item-section>
                                        <q-item-label>
                                            This is a great course-{{n}}.
                                        </q-item-label>
                                        <q-item-label caption>
                                            My name is Avinash Gupta I was learned this course that is great course. My name is Avinash Gupta I was learned this course that is great course. My name is Avinash Gupta I was learned this course that is great course.
                                        </q-item-label>
                                    </q-item-section>

                                </q-item>
                                <div class="text-h6">
                                    M. Asim Khan
                                </div>
                                <div class="text-subtitle1">
                                    Enrolled in : <a href="#" target="_blank" rel="noopener noreferrer">Dental Guide</a>
                                </div>
                                <q-item-section>
                                    <i class="far fa-thumbs-up text-blue text-h5"></i>
                                </q-item-section>
                            </q-banner>
                            <!-- <q-item>
                            <q-item-section top avatar>
                                <img class="circle" src="statics/photo11.jpg">
                            </q-item-section>

                            <q-item-section>
                                <q-item-label>
                                    This is a great course.
                                </q-item-label>
                                <q-item-label caption>
                                My name is Avinash Gupta I was learned this course that is great course. My name is Avinash Gupta I was learned this course that is great course. My name is Avinash Gupta I was learned this course that is great course.
                                </q-item-label>
                            </q-item-section>

                            <q-item-section side top>
                                <q-badge label="10k" />
                            </q-item-section>
                        </q-item> -->

                        </q-card-section>

                        <q-card-section>
                            <div class="q-pa-lg flex flex-center">
                                <q-pagination v-model="current" :max="5" input input-class="text-orange-10" />
                            </div>
                        </q-card-section>

                    </q-card>
                </div>
            </div>
        </div>
    </div>

</transition>
</template>

<script>
// import {
//     date
// } from 'quasar'
import {
    fabGithub
} from '@quasar/extras/fontawesome-v5'
const stringOptions = [
    'quasarframework/quasar',
    'quasarframework/quasar-awesome'
]
export default {
    data() {
        return {
            current: 3,
            model: null,
            options: [
                'MOH UAE GP', 'DHA GP', 'HAAD', 'USMLE Step 1', 'USMLE Step 2 CK'
            ]

        }
    },
    computed: {
        todaysDate() {
            let timeStamp = Date.now()
            return date.formatDate(timeStamp, 'dddd D MMMM')
        }
    }
}
</script>

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

.show {
    display: inline;
}

.hoverable {
    transition: all .5s ease;
    border: 1px solid #dddddd;
    border-radius: 5px !important;
}

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

    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 2px 2px rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12);
    /* border-radius: 5px; */
    vertical-align: top;
    background: #fff;
    position: relative;
    transition: all .5s ease;

}

.circle {
    border-radius: 50%;
}

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>
