<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-xs">Question Review</div>
      <div class="q-pa-md q-gutter-sm">
        <q-breadcrumbs>
          <q-breadcrumbs-el icon="home" to="/welcome" />
          <q-breadcrumbs-el label="All Questions" to="/all-q" />
          <q-breadcrumbs-el label="Question Review" to="/q-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-12 col-md-12 col-sm-12 col-xs-12 q-pa-sm">
                  <div class="text-bold q-py-sm">
                    Q. ID:
                    <span class="text-subtitle1">123456</span>
                  </div>
                  <div class="text-bold">Question:</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>
              <div class="row">
                <div class="col-12 col-md-12 col-sm-12 col-xs-12 q-pa-sm flex justify-evenly hover">
                  <img class=" q-ma-sm" src="statics/Final-imgs/1.jpg" />

                  <img class=" q-ma-sm" src="statics/Final-imgs/2.jpg" />

                  <img class=" q-ma-sm" src="statics/Final-imgs/4.jpg" />

                  <img class=" q-ma-sm hide" src="statics/Final-imgs/3.jpg" />
                </div>
              </div>
              <div class="row q-px-md">
                <div class="col-12 col-md-12 col-sm-12 col-xs-12 q-pa-sm">
                  <q-card dense>
                    <q-card-section class="bg-grey-5 text-grey-9">
                      <div class="text-body1">Answer Choise</div>
                    </q-card-section>

                    <q-card-actions vertical align="left">
                      <ol type="A" class="li-gap">
                        <li>
                          Answer choise 1
                          <q-icon class="q-px-md text-red text-bold" name="close" />
                        </li>
                        <li>
                          Answer choise 2
                          <q-icon class="q-px-md text-red text-bold" name="close" />
                        </li>
                        <li>
                          Answer choise 3
                          <q-icon class="q-px-md text-red text-bold" name="close" />
                        </li>
                        <li>
                          Answer choise 4
                          <q-icon class="q-px-md text-green text-bold" name="check" />
                        </li>
                        <li>
                          Answer choise 5
                          <q-icon class="q-px-md text-red text-bold" name="close" />
                        </li>
                      </ol>
                    </q-card-actions>
                  </q-card>
                </div>
                <div class="col-12 col-md-12 col-sm-12 col-xs-12 q-pa-sm">
                  <q-card dense>
                    <q-card-section class="bg-grey-5 text-grey-9">
                      <div class="text-body1">Explanation</div>
                    </q-card-section>

                    <q-card-actions>
                      <div
                        class="text-body1"
                      >Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste, qui. Adipisci aliquid officia harum temporibus atque voluptatem consectetur, perspiciatis earum omnis. Et distinctio, est sapiente aliquid neque dolor dicta accusamus.</div>
                      <div class="col-12 col-md-12 col-sm-12 col-xs-6 q-pa-sm flex justify-around hover">
                        <img src="statics/Final-imgs/1.jpg" />
                      </div>
                      <div class="text-body1">
                        <ul>
                          <li>Lorem, ipsum dolor sit amet consectetur adipisicing elit. In aspernatur temporibus nostrum, accusantium dolor vitae quos maxime quod veniam accusamus ullam inventore quibusdam ipsam voluptates dicta earum ut aperiam eaque.</li>
                          <li>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sunt laboriosam eos repellendus veritatis omnis, eveniet.</li>
                          <li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint architecto autem accusamus laborum eius facere explicabo commodi eligendi quos recusandae fugiat, nesciunt nostrum unde officia, debitis delectus ipsam blanditiis iste?</li>
                        </ul>
                      </div>
                    </q-card-actions>
                  </q-card>
                </div>
                <div class="col-12 col-md-12 col-sm-12 col-xs-12 q-pa-sm">
                  <q-card dense>
                    <q-card-section class="bg-grey-5 text-grey-9">
                      <div class="text-body1">Explanation</div>
                    </q-card-section>

                    <q-card-actions>
                      <div class="row q-pa-md">
                        <div class="col-6 col-md-4 col-sm-6 col-xs-6 q-pa-sm">
                          <div class="text-bold">Reference:</div>
                          <div class="text-subtitle1">Kaplan medical USMLE Step 1 Qbook</div>
                        </div>
                        <div class="col-6 col-md-4 col-sm-6 col-xs-6 q-pa-sm">
                          <div class="text-bold">Reference Details:</div>
                          <div
                            class="text-subtitle1"
                          >Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
                        </div>
                        <div class="col-6 col-md-4 col-sm-6 col-xs-6 q-pa-sm">
                          <div class="text-bold">Defficulty Level:</div>
                          <div class="text-subtitle1">Beginner</div>
                        </div>
                        <div class="col-6 col-md-4 col-sm-6 col-xs-6 q-pa-sm">
                          <div class="text-bold">Question Type:</div>
                          <div class="text-subtitle1">BCQs</div>
                        </div>
                        <div class="col-6 col-md-4 col-sm-6 col-xs-6 q-pa-sm">
                          <div class="text-bold">Time Allowed:</div>
                          <div class="text-subtitle1">3 Minutes</div>
                        </div>
                        <div class="col-6 col-md-4 col-sm-6 col-xs-6 q-pa-sm">
                          <div class="text-bold">Question Category:</div>
                          <span class="text-subtitle1" v-for="n in 3" :key="n">
                            <q-badge class="q-pa-xs q-ma-xs" color="grey">Hematology {{n}}</q-badge>
                          </span>
                        </div>
                      </div>
                    </q-card-actions>
                  </q-card>
                </div>
              </div>
            </q-card-select>
          </q-card>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
     
    };
  }
};
</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>
