<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-card class="my-card q-mb-md">
              <q-card-section>
                <div class="q-gutter-xs">
                  <q-btn outline color="primary" label="All" />
                  <q-btn color="primary" label="Correct" />
                  <q-btn color="primary" label="Incorrect" />
                  <q-btn color="primary" label="Flaged" />
                  <q-btn color="primary" label="Favourate" />
                  <q-btn color="primary" label="Not Attempted" />
                </div>
              </q-card-section>
            </q-card>

            <q-card class="my-card">
              <q-card-section>
                <div class="text-body1">
                  Showing All Tests For
                  <strong>{{model}}</strong>
                </div>
              </q-card-section>
              <q-card-section class="q-ma-xs">
                <q-markup-table>
                  <thead>
                    <tr>
                      <th class="text-left text-uppercase">s.no</th>
                      <th class="text-left text-uppercase">q.id</th>
                      <th class="text-left text-uppercase">topic</th>
                      <th class="text-left text-uppercase">subtopic</th>
                      <th class="text-center text-uppercase">result</th>
                      <th class="text-center text-uppercase">attachment</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-left">{{n*Math.floor(Math.random() * 10)}}</td>
                      <td class="text-left">Test topic {{n}}</td>
                      <td class="text-left">Test sub-topic {{n}}</td>
                      <td class="text-center">
                        <q-icon
                          v-if="Math.random() > 0.5"
                          size="sm"
                          color="secondary"
                          class="text-bold"
                          name="check"
                        />
                        <q-icon v-else size="sm" color="negative" class="text-bold" name="clear" />
                      </td>
                      <td class="text-center">
                        <q-icon
                          v-if="Math.random() > 0.5"
                          size="xs"
                          color="negative"
                          class="text-bold"
                          name="favorite"
                        />
                        <q-icon
                          v-if="Math.random() > 0.5"
                          size="xs"
                          color="secondary"
                          class="text-bold"
                          name="flag"
                        />
                        <q-icon
                          v-if="Math.random() > 0.5"
                          size="xs"
                          color="primary"
                          class="text-bold"
                          name="create"
                        />
                      </td>
                      <td class="text-center">
                        <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="totalPgs" input input-class="text-orange-10" />
                </div>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      current: 3,
      totalPgs: 5,
    };
  },
  computed: {
    todaysDate() {
      let timeStamp = Date.now();
      return date.formatDate(timeStamp, "dddd D MMMM");
    }
  }
};
</script>

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

.show {
  display: inline;
}


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>
