<template>
  <q-layout class="bg-white shadow-24">
    <div class="row q-pa-md q-ma-md">
      <div class="col-12 col-md-12">
        <q-breadcrumbs>
          <q-breadcrumbs-el label="Home" />
          <q-breadcrumbs-el label="Course" />
          <q-breadcrumbs-el label="Help Center" />
        </q-breadcrumbs>
      </div>
    </div>

    <div class="row">
      <div class="col-8 col-md-8 col-sm-12 col-xs-12 q-pa-lg text-grey-8">
        <div class="text-h4 text-bold">Can I Offer MOCK Tests To My Students?</div>
        <div class="text-body1 q-my-lg">
          Yes, you can create your own pool of questions in dashboard by clicking
          <b>‘Questions &gt; Insert New’</b> tab in menu. You can easily create test through clicking
          <b>‘Tests &gt; Create Test’</b> with your uploaded question pool. Created test can be easily assigned to any class/group or even individual students in a class through clicking
          <b>‘Tests &gt; Assign Test’</b> and selecting required class/group/individuals.
        </div>

        <div class="row">
          <div class="col-12 col-md-12">
            <div class="q-pa-sm q-gutter-sm">
              <q-banner
                rounded
                class="column text-center q-pa-md bg-grey-3"
                style="border: 1px solid #d1d1d1;"
              >
                <div class="text-h6 q-pa-md">Was this article helpful?</div>
                <div
                  class="text-weight-light"
                >{{n=Math.floor(Math.random()*10)}} out of {{m=Math.floor(Math.random()*10)}} found this helpful</div>
                <div
                  class="bg-white row q-ma-lg q-pa-md text-grey-9 flex flex-center justify-evenly"
                  style="border: 1px solid #d1d1d1;"
                >
                  <q-icon size="sm" name="thumb_up" />
                  <span class="text-weight-light text-body1">{{n}}</span>
                  <q-icon size="sm" name="thumb_down" />
                  <span class="text-weight-light text-body1">{{m}}</span>
                </div>
              </q-banner>
            </div>
          </div>
        </div>
       
      </div>

      <div class="col-4 col-md-4 col-sm-12 col-xs-12">
        <q-card class="no-shadow">
          <q-card-section>
            <q-input v-model="search" debounce="500" filled placeholder="Search">
              <template v-slot:append>
                <q-icon name="search" />
              </template>
            </q-input>
          </q-card-section>
          <q-card-section>
            <div class="text-h6 text-grey-9">RECENT POSTS</div>
            <q-separator color="grey-7" style="padding: 1px 0;" />
            <ul class="links__set">
              <li>
                <a
                  href
                >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Placeat eveniet voluptatem illo est doloribus</a>
              </li>
              <li>
                <a href>amet consectetur adipisicing elit. amet asperiores omnis explicabo</a>
              </li>
              <li>
                <a href>Loolor sit, amet consectetur adipisicing elit.</a>
              </li>
              <li>
                <a
                  href
                >Sit, amet consectetur adipisicing elit. labore non, quos nisi possimus veritatis sint aspernatur neque cum modi sapiente!</a>
              </li>
              <li>
                <a
                  href
                >Lorem consectetur labore non, quos nisi possimus veritatis sint aspernatur neque cum modi sapiente! adipisicing elit.</a>
              </li>
            </ul>
          </q-card-section>
          <q-card-section>
            <div class="text-h6 text-grey-9">CATEGORIES</div>
            <q-separator color="grey-7" style="padding: 1px 0;" />
            <ul class="links__set">
              <li>
                <a href>Medicine</a>
                <span class="q-px-sm">({{Math.floor(Math.random()*100)}})</span>
              </li>
              <li>
                <a href>Dentistry</a>
                <span class="q-px-sm">({{Math.floor(Math.random()*100)}})</span>
              </li>
              <li>
                <a href>Nursing</a>
                <span class="q-px-sm">({{Math.floor(Math.random()*100)}})</span>
              </li>
              <li>
                <a href>Pharmalogy</a>
                <span class="q-px-sm">({{Math.floor(Math.random()*100)}})</span>
              </li>
              <li>
                <a href>Vetinery</a>
                <span class="q-px-sm">({{Math.floor(Math.random()*100)}})</span>
              </li>
              <li>
                <a href>Tcam</a>
                <span class="q-px-sm">({{Math.floor(Math.random()*100)}})</span>
              </li>
            </ul>
          </q-card-section>
          <q-card-section>
            <div class="text-h6 text-grey-9">FOLLOW US</div>
            <q-separator color="grey-7" style="padding: 1px 0;" />
            <div class="row">
              <div class="col-12 col-md-12 col-xs-12 flex flex-center">
                <div class="q-pa-md q-gutter-sm">
                  <q-btn round color="primary">
                    <i class="text-h5 fab fa-facebook-f"></i>
                  </q-btn>
                  <q-btn round color="primary">
                    <i class="text-h5 fab fa-twitter"></i>
                  </q-btn>
                  <q-btn round color="primary">
                    <i class="text-h5 fab fa-linkedin-in"></i>
                  </q-btn>
                  <q-btn round color="primary">
                    <i class="text-h5 fab fa-google-plus-g"></i>
                  </q-btn>
                  <q-btn round color="primary">
                    <i class="text-h5 far fa-envelope"></i>
                  </q-btn>
                </div>
              </div>
            </div>
          </q-card-section>
        </q-card>
      </div>
    </div>

    <q-drawer v-model="left" side="left" overlay behavior="mobile" elevated>
      <div class="fit bg-grey-9">
        <div class="q-pa-none bg-grey-9 text-white" style="max-width: auto">
          <q-list class="text-h6">
            <q-expansion-item
              :content-inset-level="1"
              expand-separator
              icon="menu_book"
              label="Course"
            >
              <q-item clickable v-ripple>
                <q-item-section>Course-1</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Course-2</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Course-3</q-item-section>
              </q-item>
            </q-expansion-item>
            <q-expansion-item :content-inset-level="1" expand-separator icon="person" label="Tutor">
              <q-item clickable v-ripple>
                <q-item-section>Tutor-1</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Tutor-2</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Tutor-3</q-item-section>
              </q-item>
            </q-expansion-item>
            <q-expansion-item :content-inset-level="1" expand-separator icon="school" label="Qbank">
              <q-item clickable v-ripple>
                <q-item-section>Qbank-1</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Qbank-2</q-item-section>
              </q-item>
              <q-item clickable v-ripple>
                <q-item-section>Qbank-3</q-item-section>
              </q-item>
            </q-expansion-item>
            <q-expansion-item :content-inset-level="1" expand-separator icon="info" label="Info">
              <q-expansion-item label="Info 1" :content-inset-level="0.5">
                <q-item clickable v-ripple>
                  <q-item-section to="/home">Info-1-1</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>Info-1-2</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>Info-1-3</q-item-section>
                </q-item>
              </q-expansion-item>

              <q-expansion-item label="Info 2" :content-inset-level="0.5">
                <q-item clickable v-ripple>
                  <q-item-section>Info-1-1</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>Info-2-2</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>Info-2-3</q-item-section>
                </q-item>
              </q-expansion-item>
            </q-expansion-item>
          </q-list>
        </div>
      </div>
    </q-drawer>
    <q-page-container>
      <q-page-sticky expand position="top" style="z-index:1030;">
        <div class="containers">
          <q-toolbar class="bg-black text-white q-py-xs q-px-lg">
            <q-btn class="hide" dense flat round icon="menu" @click="left = !left" />
            <q-toolbar-title class="q-py-xs">
              <img src="statics/logo.png" height="40" />
            </q-toolbar-title>

            <div
              v-if="$q.screen.gt.sm"
              class="no-underline GL__toolbar-link q-ml-xs q-gutter-xl text-body2 text-weight-normal row items-center no-wrap"
            >
              <a href="javascript:void(0)" class="text-white">
                Course
                <q-icon class="i-rotate" name="keyboard_arrow_right" />
                <q-menu anchor="bottom left" self="top left">
                  <q-list class="q-pt-lg" style="background: #24292e;color:#ffffff;">
                    <q-item v-for="n in 3" :key="n" dense clickable>
                      <q-item-section>Course {{n}}</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </a>
              <a href="javascript:void(0)" class="text-white">
                Qbank
                <q-icon class="i-rotate" name="keyboard_arrow_right" />
                <q-menu anchor="bottom left" self="top left">
                  <q-list class="q-pt-lg" style="background: #24292e;color:#ffffff;">
                    <q-item v-for="n in 3" :key="n" dense clickable>
                      <q-item-section>Qbank {{n}}</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </a>
              <a href="javascript:void(0)" class="text-white">
                Tutor
                <q-icon class="i-rotate" name="keyboard_arrow_right" />
                <q-menu anchor="bottom left" self="top left">
                  <q-list class="q-pt-lg" style="background: #24292e;color:#ffffff;">
                    <q-item v-for="n in 3" :key="n" dense clickable>
                      <q-item-section>Tutor {{n}}</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </a>
              <!-- <a href="javascript:void(0)" class="text-white">
                    Info
              </a>-->
              <a href="javascript:void(0)" class="text-white">
                Info
                <q-icon class="i-rotate" name="keyboard_arrow_right" />
                <q-menu anchor="bottom left" self="top left">
                  <q-list
                    dense
                    class="q-pt-lg"
                    style="min-width: auto;background: #24292e;color:#ffffff;"
                  >
                    <q-item clickable>
                      <q-item-section>MOH UAE GP 1</q-item-section>
                      <q-item-section side>
                        <q-icon name="keyboard_arrow_right" />
                      </q-item-section>

                      <q-menu anchor="top right" self="top left">
                        <q-list style="min-width: auto;background: #24292e;color:#ffffff;">
                          <q-item v-for="n in 3" :key="n" dense clickable>
                            <q-item-section>Submenu Label</q-item-section>
                            <q-item-section side>
                              <q-icon name="keyboard_arrow_right" />
                            </q-item-section>
                            <q-menu auto-close anchor="top right" self="top left">
                              <q-list style="min-width: auto;background: #24292e;color:#ffffff;">
                                <q-item v-for="n in 3" :key="n" dense clickable>
                                  <q-item-section>3rd level Label</q-item-section>
                                </q-item>
                              </q-list>
                            </q-menu>
                          </q-item>
                        </q-list>
                      </q-menu>
                    </q-item>
                    <q-item clickable>
                      <q-item-section>MOH UAE GP 1</q-item-section>
                      <q-item-section side>
                        <q-icon name="keyboard_arrow_right" />
                      </q-item-section>

                      <q-menu anchor="top right" self="top left">
                        <q-list style="min-width: auto;background: #24292e;color:#ffffff;">
                          <q-item v-for="n in 3" :key="n" dense clickable>
                            <q-item-section>Submenu Label</q-item-section>
                            <q-item-section side>
                              <q-icon name="keyboard_arrow_right" />
                            </q-item-section>
                            <q-menu auto-close anchor="top right" self="top left">
                              <q-list style="min-width: auto;background: #24292e;color:#ffffff;">
                                <q-item v-for="n in 3" :key="n" dense clickable>
                                  <q-item-section>3rd level Label</q-item-section>
                                </q-item>
                              </q-list>
                            </q-menu>
                          </q-item>
                        </q-list>
                      </q-menu>
                    </q-item>
                  </q-list>
                </q-menu>
              </a>
            </div>

            <q-space />

            <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
              <q-btn v-if="$q.screen.gt.xs" dense flat round size="md" icon="notifications" />

              <q-btn dense flat no-wrap>
                <q-avatar circled size="40px">
                  <img src="statics/avtr.png" />
                </q-avatar>
                <q-icon name="arrow_drop_down" size="16px" />

                <q-menu auto-close>
                  <q-list dense class="db-menu">
                    <q-item>
                      <q-item-section class="flex flex-center">
                        <q-avatar class="q-pa-xs" circled size="50px">
                          <img src="statics/avtr.png" />
                        </q-avatar>
                        <span class="text-h6">Asim Khan</span>
                        <span class="text-caption">user@docexams.com</span>
                      </q-item-section>
                    </q-item>
                    <q-separator class="bg-grey-8" />
                    <q-item clickable class="GL__menu-link">
                      <q-icon name="person" size="21px" class="q-pa-sm q-pr-md" />
                      <q-item-section>Tutor Dashboard</q-item-section>
                    </q-item>
                    <q-item clickable class="GL__menu-link">
                      <q-icon name="menu_book" size="21px" class="q-pa-sm q-pr-md" />

                      <q-item-section>Course Dashboard</q-item-section>
                    </q-item>
                    <q-item clickable class="GL__menu-link">
                      <q-icon name="person" size="21px" class="q-pa-sm q-pr-md" />

                      <q-item-section>Qbank Dashboard</q-item-section>
                    </q-item>
                    <q-separator class="bg-grey-8" />
                    <q-item clickable class="GL__menu-link">
                      <q-icon name="help" size="21px" class="q-pa-sm q-pr-md" />

                      <q-item-section>Help</q-item-section>
                    </q-item>
                    <q-item clickable class="GL__menu-link">
                      <q-icon name="exit_to_app" size="21px" class="q-pa-sm q-pr-md" />

                      <q-item-section>Sign out</q-item-section>
                    </q-item>
                  </q-list>
                </q-menu>
              </q-btn>
            </div>
          </q-toolbar>
        </div>
      </q-page-sticky>
      <keep-alive>
        <router-view />
      </keep-alive>
    </q-page-container>
  </q-layout>
</template>

<script>
import { fabGithub } from "@quasar/extras/fontawesome-v5";
const stringOptions = [
  "quasarframework/quasar",
  "quasarframework/quasar-awesome"
];
export default {
  name: "MyLayout",
  data() {
    return {
      text: "",
      search: "",
      options: null,
      left: false,
      miniState: true,
      slide: 1,
      slides: "style",
      lorem:
        "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque voluptatem totam, architecto cupiditate officia rerum, error dignissimos praesentium libero ab nemo. sit amet consectetur adipisicing elit. Itaque voluptatem totam, architecto cupiditate officia rerum, error dignissimos praesentium libero ab nemo.",
      loading4: false,
      filteredOptions: []
    };
  },
  methods: {
    simulateProgress(number) {
      // we set loading state
      this[`loading${number}`] = true;
      // simulate a delay
      setTimeout(() => {
        // we're done, we reset loading state
        this[`loading${number}`] = false;
      }, 3000);
    },
    filter(val, update) {
      if (this.options === null) {
        // load data
        setTimeout(() => {
          this.options = stringOptions;
          this.$refs.search.filter("");
        }, 2000);
        update();
        return;
      }
      if (val === "") {
        update(() => {
          this.filteredOptions = this.options.map(op => ({
            label: op
          }));
        });
        return;
      }
      update(() => {
        this.filteredOptions = [
          {
            label: val,
            type: "In this repository"
          },
          {
            label: val,
            type: "All GitHub"
          },
          ...this.options
            .filter(op => op.toLowerCase().includes(val.toLowerCase()))
            .map(op => ({
              label: op
            }))
        ];
      });
    }
  },
  created() {
    this.fabGithub = fabGithub;
  }
};
</script>

<style lang="css" scoped>
.my-card {
  width: 100%;
  max-width: 265px;
}

.info-card {
  width: 100%;
  max-width: 30vw;
  max-height: auto;
}

.related-art {
  width: 100%;
  max-height: auto;
}

.my-card2 {
  width: 100%;
  max-width: 600px;
}

.my-card-tuts {
  width: 100%;
  max-width: 500px;
}

.col-height {
  height: 380px;
}

.col-height-tuts {
  max-height: 447px;
}

.wide {
  width: 80%;
}

.l-h {
  line-height: 3.5;
}

.min-h {
  min-height: 160px;
}

.q-card__section--vert {
  padding: 10px;
}

.hide {
  display: none;
}

.show {
  display: inline;
}

.no-underline a {
  text-decoration: none;
  font-size: 1.5em;
}

.no-underline a:hover {
  color: rgb(0, 255, 0) !important;
}

.no-underline a .i-rotate {
  transform: rotate(0deg);
  transition: all 0.5s ease;
}

.no-underline a:hover .i-rotate {
  transform: rotate(90deg);
  transition: all 0.5s ease;
}

.q-item {
  min-height: 24px;
  padding: 2px 46px;
  color: inherit;
  transition: color 0.3s, background-color 0.3s;
}

.content {
  max-width: 60%;
}

.containers {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  width: 100%;
}

.h4-title {
  color: #fff;
  font-size: 36px;
  font-family: keep calm;
}

.h5-title {
  width: 75%;
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.slider-l {
  position: absolute;
  z-index: 1030;
  width: 65%;
}

.top-slider {
  background-image: linear-gradient(
    to bottom right,
    black,
    rgba(0, 0, 0, 0.75)
  );
  position: relative;
  min-height: 70%;
}

.top-slider .img-float {
  width: 50%;
  float: right !important;
}

.db-menu {
  background-color: rgba(0, 0, 0, 0.9);
  color: white;
  width: 20vw;
}

.hover-fx {
  transition: all 0.3s ease-out;
}

.hover-fx:hover {
  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.2),
    0 14px 21px 2px rgba(0, 0, 0, 0.14), 0 5px 26px 4px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease-in;
}

.testi-bg {
  height: 80vh;
  width: 100%;
  background-image: radial-gradient(
      circle,
      rgba(35, 146, 131, 0.99),
      rgba(97, 190, 178, 0.92)
    ),
    url(../statics/testiBg.svg);
  background-repeat: repeat;
}

.bg-map {
  height: 80vh;
  width: 100%;
  background-image: url(../statics/world-map.png);
  background-repeat: no-repeat;
  /* background-size: cover;
        background-position: top; */
}

.bg-map-mob {
  height: 80vh;
  width: 100%;
  background-image: url(../statics/world-map.png);
  background-repeat: no-repeat;
}

.logo-hover {
  filter: grayscale(100%);
  margin: 5px 20px;
}

.logo-hover:hover {
  filter: grayscale(0%);
}

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

.img-size {
  width: 60%;
  height: 150px;
}

.popup-wh {
  width: 240px;
  height: auto;
}

.face-card {
  width: 25%;
}

.img-hover {
  filter: grayscale(100%);
  transform: scale(1, 1);
  transition: all 0.5s;
}

.img-hover:hover {
  filter: grayscale(0%);
  transform: scale(1.3, 1.3);
  transition: all 0.5s;
  border: 1px solid white;
  box-shadow: 0 7px 9px -4px rgba(0, 0, 0, 0.5),
    0 14px 21px 2px rgba(0, 0, 0, 0.24), 0 5px 26px 4px rgba(0, 0, 0, 0.12);
  z-index: 1030;
}
.links__set {
  list-style: none;
}
.links__set li {
  padding: 15px 0;

  border-bottom: 1px dotted #d1d1d1;
}
.links__set li a {
  color: #7b7b7b;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .btn-center {
    text-align: center;
  }

  .q-mt-lg {
    margin-left: 15px;
  }

  .w-40 {
    width: 96%;
    font-size: 18px;
    line-height: 1;
    text-align: center;
  }

  .h4-title-mob {
    font-size: 30px;
    text-align: center;
    line-height: 1;
    margin-left: 0px;
  }

  .w-50 {
    width: 100%;
    font-size: 36px;
    line-height: 1;
    text-align: center;
    margin-top: -80px;
  }

  .info-card {
    width: 100%;
    max-width: 96%;
    max-height: 320px;
  }
  .img-size {
    width: 90%;
    height: 150px;
    display: none;
  }
  .my-card2 {
    width: 100%;
    max-width: 85%;
  }

  .face-card {
    width: 45%;
  }

  .col-height-tuts {
    max-height: 35%;
  }

  .hide {
    display: inline;
  }

  .show {
    display: none;
  }

  .testi-bg {
    height: 100% !important;
  }

  .min-h {
    min-height: 16px;
  }

  .text-h4 {
    font-size: 26px !important;
  }

  .h3-title {
    color: #fff;
    font-family: keep calm;
    font-size: 30px;
    line-height: 1;
    text-align: center;
  }

  .h5-title {
    display: none;
  }

  .slider-l {
    width: 100%;
    margin-top: 0%;
  }

  .top-slider {
    height: 70vh;
  }

  .top-slider .img-float {
    width: 100%;
    height: auto;
  }

  .col-height {
    height: auto;
  }

  .wide {
    width: 95%;
    margin-top: 0;
  }

  .q-pt-xl {
    padding-top: 10px !important;
  }

  .q-pl-xl {
    padding-left: 36px !important;
  }

  .db-menu {
    width: 50vw;
  }

  .q-card__section--horiz > div:not(:last-child),
  .q-card__section--horiz > img:not(:last-child) {
    /* top: -80px; */
    top: 0px;
  }
}

@media only screen and (min-width: 899px) and (max-width: 1280px) {
  .face-card {
    width: 11.7vw;
  }
}
</style><style>
.top-slider .q-carousel__slides-container {
  height: 100% !important;
  width: 70%;
  float: right;
  margin-top: 0px !important;
}

.border-red {
  border: 1px solid red;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .top-slider .q-carousel__slides-container {
    height: 65% !important;
    margin-top: 200px !important;
    float: none;
    width: 100%;
  }
}
</style>
