<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-xs">Test Review</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="Test Review" to="/test-review" />
        </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-pa-md">
                <div class="col-6 col-md-6 col-xs-12 q-pa-sm">
                  <div class="text-bold q-py-sm">Test Name:</div>
                  <div class="text-caption q-py-sm">MOH Test 1</div>
                </div>
                <div class="col-6 col-md-6 col-xs-12 q-pa-sm">
                  <div class="text-bold q-py-sm">Questions Level:</div>
                  <div class="text-caption q-py-sm">
                    <q-badge color="grey-7 q-pa-xs q-mx-xs">Easy</q-badge>
                    <q-badge color="grey-7 q-pa-xs q-mx-xs">Normal</q-badge>
                    <q-badge color="grey-7 q-pa-xs q-mx-xs">Hard</q-badge>
                  </div>
                </div>
                <div class="col-12 col-md-12 col-xs-12 q-pa-sm">
                  <div class="text-bold">Test Description:</div>
                  <div
                    class="text-subtitle1"
                  >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate culpa facere nulla. Nisi inventore quos aliquid, excepturi earum doloremque unde ipsum aliquam, perspiciatis veritatis nulla facere placeat delectus odit velit.</div>
                </div>
                <div class="col-4 col-md-4 col-xs-6 q-pa-sm">
                  <q-toggle
                    v-model="third"
                    checked-icon="check"
                    color="primary"
                    label="Timed"
                    unchecked-icon="clear"
                  />
                </div>
                <div class="col-4 col-md-4 col-xs-6 q-pa-sm">
                  <q-toggle
                    v-model="fourth"
                    checked-icon="check"
                    color="primary"
                    label="Tutored"
                    unchecked-icon="clear"
                  />
                </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>
                      <thead>
                        <tr>
                          <th class="text-left text-uppercase">Question</th>
                          <th class="text-right text-uppercase">Action</th>
                          <th class="text-right text-uppercase">Level</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="n in 3" :key="n">
                          <td class="text-left"> 
                          <div class="ellipsis" style="width:500px;">
                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi ducimus doloremque dignissimos quisquam officiis velit. Assumenda laborum ad alias quod in quidem, minus cum accusantium deleniti sed blanditiis rerum. Quisquam?
                          </div>
                          </td>
                          <td style="width:20%;" class="text-right">
                            <a href="/#/q-review">More Details</a>
                          </td>
                          <td style="width:20%;" class="text-right">{{level[n]}}</td>
                        </tr>
                      </tbody>
                    </q-markup-table>
                  </q-card>
                </div>
              </div>
            </q-card-select>
          </q-card>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      third: false,
      fourth: true,
      level: ["","Easy", "Medium", "Hard"]
    };
  }
};
</script>

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

.show {
  display: inline;
}

a {
  text-decoration: none;
  color: #04b1ed;
  cursor: pointer;
}
.hover img {
  filter: grayscale(100%);
  transition: all 0.5s ease;
}
.hover img:hover {
  filter: grayscale(0%);
  transition: all 0.5s ease;
}
.li-gap li {
  padding: 5px;
}

@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>
