<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-md">Tests</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="Select Course" />
              </q-card-section>
              <q-card-section>
                <div class="text-body1">
                  Showing All Tests For
                  <strong>{{model}}</strong>
                </div>
              </q-card-section>
              <q-card-section class="q-ma-md">
                <q-markup-table>
                  <thead>
                    <tr>
                      <th class="text-left text-uppercase">s.no</th>
                      <th class="text-left text-uppercase">test name</th>
                      <th class="text-left text-uppercase">Assign date</th>
                      <th class="text-left text-uppercase">Expiry Date</th>
                      <th class="text-left text-uppercase">total qs</th>
                      <th class="text-left text-uppercase">score</th>
                      <th class="text-left text-uppercase">STATUS</th>
                      <th class="text-center text-uppercase">ACTION</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="n in 5" :key="n">
                      <td class="text-left">{{n}}</td>
                      <td class="text-right">abc test {{n}}</td>
                      <td class="text-right">{{n+1}}-{{12-n+1}}-20{{n+11}}</td>
                      <td class="text-right">{{n+3}}-{{12-n}}-20{{n+10}}</td>
                      <td class="text-right">{{n*5}}</td>
                      <td class="text-right">{{(n*Math.floor(Math.random()*n))/(n*5)*100}} %</td>
                      <td class="text-right">
                        <q-badge
                          v-if="Math.random() > 0.5"
                          class="q-pa-xs"
                          color="secondary"
                        >Completed</q-badge>
                        <q-badge v-else class="q-pa-xs" color="negative">Expired</q-badge>
                      </td>
                      <td class="text-center">
                        <a
                          href="/#/course/test/analysis"
                          class="no-underline text-blue-5 cursor-pointer q-pa-xs"
                        >Analysis</a>
                        <a
                          href="/#/app"
                          class="no-underline text-blue-5 cursor-pointer q-pa-xs"
                        >Review</a>
                      </td>
                    </tr>
                    <q-separator style="width:0%" inset />
                  </tbody>
                </q-markup-table>
                <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>
      <q-dialog v-model="videoplayer">
        <q-card class="no-border-radius">
          <!-- <q-linear-progress :value="0.2" color="pink" /> -->

          <q-card-section class="row items-center no-wrap q-pa-none q-ma-none bg-black">
            <div>
              <q-media-player
                type="video"
                :ratio="16/9"
                :sources="sources"
                :poster="poster"
                mobile-mode
              />
              <!-- <q-video  src="https://www.youtube.com/embed/wdzbbsN1QVM" /> -->
            </div>
          </q-card-section>
        </q-card>
        <q-btn dense round color="black" icon="clear" class="show" style="top: -175px;" />
      </q-dialog>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      current: 3,
      model: null,
      options: ["Dental Guide", "Surgery", "Abc course", "USMLE Step 1 course"],
      poster: "statics/video-poster.png",
      sources: [
        {
          src: "statics/video1.mp4",
          type: "video/mp4"
        }
      ]
    };
  },
  computed: {
    todaysDate() {
      let timeStamp = Date.now();
      return date.formatDate(timeStamp, "dddd D MMMM");
    }
  }
};
</script>

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

.show {
  display: inline;
}
.click-fx {
  background: grey;
}
.click-fx:hover {
  background: #1976d2 !important;
}
.hoverable {
  transition: all 0.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 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;
  }

  .show {
    display: none;
  }
}

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