<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-xs">Assigned Test Details</div>
      <div class="q-pa-md q-gutter-sm">
        <q-breadcrumbs>
          <q-breadcrumbs-el icon="home" to="/tutor/welcome" />
          <q-breadcrumbs-el label="All Tests" to="/all-tests" />
          <q-breadcrumbs-el label="Assigned Test Details" to="/assigned-test-details" />
        </q-breadcrumbs>
      </div>
      <div class="row">
        <div class="col-12 col-md-12 col-sm-12 col-xs-12">
          <q-card class="my-card">
            <q-card-select>
              <div class="row q-px-md">
                <div class="col-6 col-md-6 col-xs-12 q-pa-sm row">
                  <div class="text-bold q-py-sm">Test Name:</div>
                  <div class="text-body1 q-pa-sm">MOH Test 1</div>
                </div>
                <div class="col-6 col-md-6 col-xs-12 q-pa-sm row">
                  <div class="text-bold q-py-sm">Group Name:</div>
                  <div class="text-body1 q-pa-sm">Clinical Surgery</div>
                </div>
              </div>
              <div class="row q-pa-md">
                <div class="col-6 col-md-6 col-xs-12 q-pa-sm">
                  <div class="text-bold q-py-sm">Valid From:</div>
                  <div class="text-body1 q-py-sm">{{todaysDate}}</div>
                </div>
                <div class="col-6 col-md-6 col-xs-12 q-pa-sm">
                  <div class="text-bold q-py-sm">Valid To:</div>
                  <div class="text-body1 q-py-sm">{{ todaysDate}}</div>
                </div>
              </div>

              <div class="row q-px-md">
                <div class="col-12 col-md-12 col-xs-12 q-pa-sm">
                  <q-card>
                    <q-markup-table class="hidee">
                      <thead>
                        <tr>
                          <th class="text-left text-uppercase">Student Name</th>
                          <th class="text-left text-uppercase">Status</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="n in 5" :key="n">
                          <td class="text-left">Asim Khan</td>
                          <td class="text-left">
                            <q-badge
                              v-if="Math.random() > .5"
                              color="secondary"
                              class="q-pa-xs"
                            >Assigned</q-badge>
                            <q-badge v-else color="negative" class="q-pa-xs">Not Assigned</q-badge>
                          </td>
                        </tr>
                      </tbody>
                    </q-markup-table>
                  </q-card>
                </div>
              </div>
            </q-card-select>
            <div class="col-12 col-md-12 q-py-md flex flex-center">
              <q-btn to="/assigned-test-edit" color="secondary" size="md">Edit</q-btn>
             
            </div>
          </q-card>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { date } from "quasar";
export default {
  data() {
    return {
      third: false,
      fourth: true,
      showScroller2: false,
      value: "",
      inputValue: "",
      level: ["", "Easy", "Medium", "Hard"],
      
    };
  },
  computed: {
    todaysDate() {
      let timeStamp = Date.now();
      timeStamp = date.addToDate(timeStamp, { days: 7, month: 1 });
      return date.formatDate(timeStamp, "YYYY-MM-DD, HH:MM");
    }
  },
  
};
</script>

