<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="q-pa-sm">
      <div class="text-h5 q-pb-md">All Questions</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>
                <div class="text-bold text-grey-8 q-py-sm">Category/Exam/Doctype/Topic/Subtopic</div>

                <q-select
                  outlined
                  saperator
                  v-model="model"
                  :options="options"
                  option-value="id"
                  option-label="desc"
                  option-disable="inactive"
                  label="Please select exam"
                />
                <!-- <q-separator inset class="q-my-md" /> -->
              </q-card-section>

              <q-card-section>
                <div class="row">
                  <div class="col-12 col-md-12">
                    <q-card class="my-card">
                      <q-markup-table flat>
                        <thead>
                          <tr>
                            <th class="text-left">QUESTION</th>
                            <th class="text-right">ACTION</th>
                          </tr>
                        </thead>
                        <tbody v-for="n in 5" :key="n">
                          <tr>
                            <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 class="text-right">
                              <q-btn flat dense round to="/q-review">
                                <q-icon
                                  size="sm"
                                  class="text-blue hoverable cursor-pointer"
                                  name="visibility"
                                ></q-icon>
                              </q-btn>
                              <q-btn flat dense round to='/insert-q'>
                                <q-icon
                                  clickable
                                  size="sm"
                                  @click="medium = true"
                                  class="text-green hoverable cursor-pointer"
                                  name="edit"
                                />
                              </q-btn>
                            </td>
                          </tr>
                          <q-separator style="width:0%" inset />
                        </tbody>
                      </q-markup-table>
                    </q-card>
                  </div>
                </div>
              </q-card-section>

              <q-card-section>
                <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>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      current: 1,
      model: null,

      options: [
        {
          id: "cate",

          desc: "Physician/MOH UAE/General Practitioner (GP)",

          inactive: true
        },

        {
          id: "topics1",

          desc: "Internal Medicine/Neuromuscular"
        },

        {
          id: "topics2",

          desc: "Internal Medicine/Endocrinology"
        },

        {
          id: "topics3",

          desc: "Internal Medicine/Infectious Disease"
        },

        {
          id: "cate2",

          desc: "Physician/MOH UAE/Internal Medicine",

          inactive: true
        },

        {
          id: "topics4",

          desc: "Internal Medicine/Cardiology"
        }
      ]
    };
  },

  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>
