<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's Topic Reviews</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="Progress" to="/course-progress" />
          <q-breadcrumbs-el label="Progress Review" to="/progress-review" />
          <q-breadcrumbs-el label="Student's Topic Reviews" to="/student-reviews" />
        </q-breadcrumbs>
      </div>
      <div class="row flex flex-center">
        <div class="col-12 col-md-12">
          <div class="q-pa-mdd">
            <q-card class="my-card no-shadow">
              <q-card-section>
                <div class="col-12 col-md-12 row q-pb-sm">
                  <div class="text-body1 text-bold">Course Name:</div>
                  <div class="text-body1 q-mx-md">MOH UAE General Practitioner</div>
                </div>
                <div class="col-12 col-md-12 row">
                  <div class="text-body1 text-bold">Topic(s):</div>
                  <div class="text-body1 q-mx-md">Cardio Vascular Deseases</div>
                </div>
              </q-card-section>
              <q-card-section class="hoverable q-ma-md" v-for="n in 3" :key="n">
                <q-item>
                  <q-item-section top thumbnail class="q-ml-none flex-center show">
                    <img
                      style="border-radius:50%; width:80px; height:80px;"
                      src="https://cdn.quasar.dev/img/boy-avatar.png"
                    />
                    <div class="text-bold q-mt-md">Dr. Andy R.</div>
                    <div>MBBS FRCS MD</div>
                  </q-item-section>

                  <q-item-section top class="row">
                    <q-item class="hide-img">
                      <q-item-section top thumbnail class="q-ml-none">
                        <img
                            style="border-radius:50%; width:80px; height:80px;"
                            src="https://cdn.quasar.dev/img/boy-avatar.png"
                          />
                      </q-item-section>

                      <q-item-section>
                        <q-item-label>Dr. Andy R.</q-item-label>
                        <q-item-label
                          caption
                        >MBBS FRCS MD</q-item-label>
                      </q-item-section>
                    </q-item>
                    <div class="hide text-center">
                      <div class="text-bold q-mt-md">
                      </div>
                    </div>
                    <div class="text-body1 text-bold text-grey-8 q-my-sm">
                      Date:
                      <span class="text-body1">27-04-2020</span>
                    </div>
                    <div class="text-body1 text-bold text-grey-8 text-underline">Student's Feedback</div>
                    <div class="text-body2 row justify-between q-my-sm">
                      Tutor knowledge for this topic was?
                      <q-item-section side>
                        <q-badge class="q-pa-xs" label="Very Good" />
                      </q-item-section>
                    </div>
                    <div class="text-body2 row justify-between q-my-sm">
                      How satisfactorily tutor answered your questions?
                      <q-item-section side>
                        <q-badge class="q-pa-xs" label="Good" />
                      </q-item-section>
                    </div>
                    <div class="text-body2 row justify-between q-my-sm">
                      Class time, puntuality &amp; course pace managed by tutor was?
                      <q-item-section side>
                        <q-badge class="q-pa-xs" label="Good" />
                      </q-item-section>
                    </div>
                    <div class="text-body1 text-bold text-grey-8 text-underline">Remarks</div>
                    <div
                      class="text-body2 row justify-between q-my-sm"
                    >Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur ipsam, debitis tenetur quaerat, ex blanditiis ea iure quibusdam voluptas, unde exercitationem ullam sapiente laudantium molestias. Saepe debitis atque deserunt voluptatem!</div>
                    <q-checkbox v-model="markedRead[n]" label="Marked as Read" />
                  </q-item-section>
                </q-item>
              </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"
];
const markedRead = ["marked1","marked2", "marked3"]
export default {
  data() {
    return {
      current: 3,
      markedRead: [],
      model: null,
      marked1: false,
      marked2: false,
      marked3: false,
      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;
}
.hide-img {
    display: none;
}
.show {
  display: inline;
}

.hoverable {
  transition: all 0.5s ease;
  border: 1px solid #dddddd;
  border-radius: 5px !important;
}
.text-underline {
  text-decoration: underline;
}
.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: #f3f3f3;
  position: relative;
  transition: all 0.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;
  }
.hide-img {
    display: flex;
}
  .show {
    display: none;
  }
}

@media only screen and (min-width: 899px) and (max-width: 1280px) {
}
</style>
