<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 Tests</div>
      <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 text-uppercase">Test Name</th>
                  <th class="text-center text-uppercase">Assigned Groups</th>
                  <th class="text-right text-uppercase">ACTION</th>
                </tr>
              </thead>
              <tbody v-for="n in 5" :key="n">
                <tr>
                  <td class="text-left">Test one</td>
                  <td class="text-left no-underline">
                    <ul v-if="Math.random() > 0.5">
                      <li>
                        <a href="/#/assigned-test-details" class="text-blue-8">Dental Guide</a>
                      </li>
                      <li>
                        <a href="/#/assigned-test-details" class="text-blue-8">Clinical Surgery</a>
                      </li>
                       <li>
                        <a href="/#/assigned-test-details" class="text-blue-8">Surgery</a>
                      </li>
                    </ul>
                    <ul v-else>
                      <li class="text-amber-10">
                         Not assigned to any group
                      </li>
                    </ul>
                  </td>
                  <td class="text-right">
                    <q-btn flat dense round to="/test-review">
                      <q-icon
                        size="sm"
                        class="text-blue hoverable cursor-pointer"
                        name="visibility"
                      ></q-icon>
                    </q-btn>
                    <q-btn flat dense round to='/assign-test'>
                      <q-icon
                        clickable
                        size="sm"
                        class="text-green hoverable cursor-pointer"
                        name="assignment"
                      />
                    </q-btn>
                  </td>
                </tr>
                <q-separator style="width:0%" inset />
              </tbody>
            </q-markup-table>
          </q-card>
        </div>
      </div>
      <q-dialog v-model="medium">
        <q-card style="width: 700px; max-width: 80vw;">
          <q-card-section>
            <div class="text-h6 text-center">Course Edit Alert</div>
          </q-card-section>

          <q-card-section class="q-pt-none text-orange text-center bg-red-1 q-pa-md q-ma-md">
            Course is approved therefore, modification is disabled.For any modification you may
            <a
              href="#"
              @click="medium = true"
            >contact us</a>
          </q-card-section>

          <q-card-actions align="center" class="bg-white text-teal">
            <q-btn outline label="Close" v-close-popup />
          </q-card-actions>
        </q-card>
      </q-dialog>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      stdname: "",
      medium: false
    };
  }
};
</script>

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

.show {
  display: inline;
}
.no-underline a {
  text-decoration: none;
}
.no-underline ul {
  list-style-type: none;
  text-align: center;
}

.no-underline ul li {
  display: inline;
  font-size: 16px;
}

.no-underline ul li:not(:last-child):after {
  content: ", ";
}

.hoverable:hover {
  filter: grayscale(100%);
}

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