<template>
  <q-layout class="bg-white shadow-24 q-px-md">
    <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
      <div class="row">
        <div class="col-12 col-md-8 col-sm-12 col-xs-12 order-start">
          <q-card class="q-ma-md" elevated bordered>
            <q-card-section>
              <div class="row">
                <div class="col-4 col-md-4 col-sm-12 col-xs-12 q-pa-none flex flex-center">
                  <div class="q-pa-none">
                    <q-avatar style="width: 180px;height:180px;">
                      <img
                        v-if="x = Math.floor((Math.random() * 10) + 1)"
                        :src="'statics/'+ avatar[x]"
                        alt="Tutor Photo"
                      />
                    </q-avatar>
                  </div>
                </div>
                <div class="col-8 col-md-8 col-sm-12 col-xs-12 q-pa-md text-grey-8">
                  <div class="text-h4 text-bold text-grey-9">Asim Khan</div>
                  <div class="text-caption text-bold text-grey-9">MBBS, FCPS, MRCP</div>
                  <div class="text-body1 q-pt-md">
                    <q-icon size="sm" name="school" />
                    {{Math.floor(Math.random()*10)*200}} hours tutoring {{Math.floor(Math.random()*100)+10}} students
                  </div>
                  <div class="q-py-md" style="width: 80%;">
                    <div class="q-gutter-y-md row">
                      <div class="q-pa-xs">
                        <q-icon color="primary" size="xs" name="thumb_up" />
                        <span class="q-pa-sm">30</span>
                      </div>
                      <q-space />
                      <q-separator vertical inset />
                      <q-space />
                      <div class="q-pa-xs">
                        <q-icon size="xs" name="thumb_down" />
                        <span class="q-pa-sm">2</span>
                      </div>
                      <q-space />
                      <q-separator vertical inset />
                      <q-space />
                      <div class="text-caption q-pa-xs">(96% positive)</div>
                    </div>
                  </div>
                  <div class="text-green text-body1 text-bold">
                    <q-icon size="sm" name="verified_user" />Tutor satisfaction guarantee
                  </div>
                </div>
              </div>
            </q-card-section>
          </q-card>

          <div class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs">About Me</div>
          <q-card class="q-mx-md q-my-sm" elevated bordered>
            <q-card-section>
              <div class="q-pa-md text-body1 text-grey-8">
                <div>
                  <p>Whether for your own projects or to draw for other people.</p>
                </div>

                <div>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis lectus magna
                  <span
                    v-if="readMore"
                  ></span>
                  <span v-else>...</span>
                </div>

                <p v-show="readMore">
                  Ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Turpis egestas pretium aenean pharetra magna ac
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, perferendis laborum, sapiente necessitatibus molestiae dolores sed dignissimos vel eaque nam amet nostrum vero. Minus, iste non dolorum ducimus et fugit.
                  placerat. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Sed cras ornare arcu dui. Aliquam vestibulum
                  morbi blandit cursus. Adipiscing elit ut aliquam purus sit amet. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Ut etiam sit amet
                  nisl purus in mollis. Eu mi bibendum neque egestas congue quisque egestas diam in. Pellentesque adipiscing
                  commodo elit at imperdiet dui accumsan sit.
                </p>
                <q-btn flat color="primary" @click="readMore =! readMore">
                  <span v-if="readMore">- Read Less</span>
                  <span v-else>+ Read More</span>
                </q-btn>
              </div>
            </q-card-section>
          </q-card>
          <div class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs">Education</div>
          <q-card class="q-mx-md q-my-sm" elevated bordered>
            <q-card-section>
              <div class="text-grey-9 q-px-md">
                <div>
                  <div class="text-h6">Highest Academic Education</div>
                  <ul>
                    <li>MBBS from ABC University in 2009</li>
                    <li>FRCS from Kingstone University UK in 2012</li>
                  </ul>
                </div>

                <div>
                  <div class="text-h6">Certifications / Exams.</div>
                  <ul>
                    <li>MOH UAE (GP) in 2002</li>
                    <li>USMLE Step - 1 in 2010</li>
                  </ul>
                </div>
              </div>
            </q-card-section>
          </q-card>

          <div class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs">Teaching / Work Experience</div>
          <q-card class="q-mx-md q-my-sm" elevated bordered>
            <q-card-section>
              <div class="q-pa-md text-body1 text-grey-8">
                <div>
                  <p>Whether for your own projects or to draw for other people.</p>
                </div>

                <div>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis lectus magna
                  <span
                    v-if="readMore2"
                  ></span>
                  <span v-else>...</span>
                </div>

                <p v-show="readMore2">
                  Ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Turpis egestas pretium aenean pharetra magna ac
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, perferendis laborum, sapiente necessitatibus molestiae dolores sed dignissimos vel eaque nam amet nostrum vero. Minus, iste non dolorum ducimus et fugit.
                  placerat. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Sed cras ornare arcu dui. Aliquam vestibulum
                  morbi blandit cursus. Adipiscing elit ut aliquam purus sit amet. Aenean sed adipiscing diam donec adipiscing tristique risus nec. Ut etiam sit amet
                  nisl purus in mollis. Eu mi bibendum neque egestas congue quisque egestas diam in. Pellentesque adipiscing
                  commodo elit at imperdiet dui accumsan sit.
                </p>
                <q-btn flat color="primary" @click="readMore2 =! readMore2">
                  <span v-if="readMore2">- Read Less</span>
                  <span v-else>+ Read More</span>
                </q-btn>
              </div>
            </q-card-section>
          </q-card>
          <div class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs">Expertise</div>
          <q-card class="q-mx-md q-my-sm" elevated bordered>
            <q-card-section>
              <div class="q-pa-md text-body1 text-grey-8" v-for="xp in 1" :key="xp">
                <div class="list text-blue-8">
                  <ul>
                    <li>MOH UAE</li>
                    <li>General Practitioner (GP)</li>
                    <li>Internal Medicine</li>
                  </ul>
                </div>
                <div class="list">
                  <ul>
                    <li v-for="n in 3" :key="n">
                      <q-badge class="q-pa-sm" color="grey-3" text-color="grey-8">{{topics[n]}}</q-badge>
                    </li>
                    <span v-if="moreSkills"></span>
                    <span v-else>...</span>
                  </ul>
                </div>

                <div v-show="moreSkills" class="list">
                  <ul>
                    <li v-for="n in 5" :key="n">
                      <q-badge class="q-pa-sm" color="grey-3" text-color="grey-8">{{topics[n]}}</q-badge>
                    </li>
                  </ul>
                </div>
                <q-btn flat size="sm" color="secondary" @click="moreSkills =! moreSkills">
                  <span v-if="moreSkills">- More Skills</span>
                  <span v-else>+ More Skills</span>
                </q-btn>
              </div>
            </q-card-section>
          </q-card>
          <div class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs">Tutor Intro.</div>
          <q-card class="q-mx-md q-my-sm" elevated bordered>
            <q-card-section>
              <div class="q-pa-md" style="width:80%;">
                <q-video :ratio="16/9" src="https://www.youtube.com/embed/P_B-ZZ705zo" />
              </div>
            </q-card-section>
          </q-card>
          <div class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs">General Availability</div>
          <q-card class="q-mx-md q-my-sm" elevated bordered>
            <q-card-section>
              <div class="row q-pa-sm" v-for="day in 7" :key="day">
                <div class="col-6 text-h6 text-weight-regular text-grey-8">
                  <span class="q-pa-md">{{days[day]}}:</span>
                </div>
                <div
                  v-if="x = Math.floor((Math.random() * 10))"
                  class="col-6 text-h6 text-weight-regular text-grey-8"
                >{{days[x]}} 01:41:00 am - 01:41:00 am</div>
              </div>
            </q-card-section>
          </q-card>

          <div class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs">Course Reviews</div>
          <q-card class="q-mx-md q-my-sm">
            <q-card-section v-for="comment in 3" :key="comment" class="q-pa-none">
              <div class="row">
                <div
                  class="col-12 row justify-between q-pa-sm rounded-borders"
                  style="border:1px solid #d1d1d1;"
                >
                  <q-avatar>
                    <img
                      v-if="x = Math.floor((Math.random() * 10) + 1)"
                      :src="'statics/'+ avatar[x]"
                    />
                  </q-avatar>
                  <div class="text-caption">{{Math.floor(Math.random()*100)}} min ago</div>
                  <div class="q-pa-sm">
                    <div class="text-bold">Behavioural Science</div>
                    <span class="text-weight-bold">Jhon Doe</span>
                    --
                    <div>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
                      <span
                        v-if="moreComments"
                      ></span>
                      <span v-else>...</span>
                    </div>

                    <div v-show="moreComments">
                      Ligula ullamcorper malesuada proin libero nunc consequat interdum varius. Turpis egestas pretium aenean pharetra magna ac
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, perferendis laborum, sapiente necessitatibus molestiae dolores sed dignissimos vel eaque nam amet nostrum vero. Minus, iste non dolorum ducimus et fugit.
                    </div>
                    <div class="flex flex-center">
                      <q-btn
                        flat
                        dense
                        size="sm"
                        color="primary"
                        @click="moreComments =! moreComments"
                      >
                        <span v-if="moreComments" class="q-mt-sm">- Read Less</span>
                        <span v-else class="q-mt-sm">+ Read More</span>
                      </q-btn>
                    </div>
                  </div>
                </div>
              </div>
            </q-card-section>
          </q-card>
          <div class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs">
            Courses Offered By
            <span class="text-blue-6 text-bold">Asim Khan</span>
          </div>
          <q-card class="q-mx-md q-my-sm" elevated bordered>
            <q-card-section>
              <q-carousel
                v-model="slide1"
                transition-prev="slide-right"
                transition-next="slide-left"
                swipeable
                animated
                control-color="primary"
                padding
                arrows
                height="auto"
              >
                <q-carousel-slide :name="x" class="column no-wrap" v-for="x in 8" :key="x">
                  <div class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap">
                    <div class="q-pa-md row items-start q-gutter-lg flex-center">
                      <q-card class="hover-fx my-card bg-grey-1" v-for="cards in 1" :key="cards">
                        <img
                          v-if="i = Math.floor((Math.random() * 10) + 1)"
                          width="265px"
                          height="95px"
                          :src="'statics/'+ photo[i]"
                        />
                        <q-card-section>
                          <q-avatar
                            class="q-pa-none absolute"
                            circled
                            size="50px"
                            style="top: 0; left: 12px; transform: translateY(-50%);"
                          >
                            <img :src="'statics/'+ avatar[i+1]" />
                          </q-avatar>
                          <span class="text-subtitle2 q-pt-xl l-h">John Doe</span>
                          <q-avatar
                            class="q-pa-none absolute"
                            circled
                            size="50px"
                            style="top:0; left: 90px; transform: translateY(-50%);"
                          >
                            <img :src="'statics/'+ avatar[i+2]" />
                          </q-avatar>
                          <span class="text-subtitle2 q-pt-xl q-pl-md l-h">John Doe</span>
                        </q-card-section>

                        <q-card-section class="q-pa-none">
                          <div
                            class="text-h6 text-uppercase q-pl-md"
                            style="line-height:1;"
                          >CLINICAL SURGERY</div>

                          <div
                            class="q-pa-md"
                            style="max-width:265px;"
                          >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi adipisci odit illum necessitatibus ad obcaecati!</div>
                          <div class="q-pa-md text-center">Starts: July,28,2019</div>
                          <div class="text-h6 text-center">
                            US $
                            <span class="text-strike">60</span>
                            <span style="color:#d10000;font-size: 24px;">80</span>
                          </div>
                        </q-card-section>
                        <q-card-section class="flex flex-center">
                          <q-btn
                            size="md"
                            color="primary"
                            label="More Details"
                            to="/course/details"
                          />
                        </q-card-section>
                      </q-card>
                    </div>
                  </div>
                </q-carousel-slide>
              </q-carousel>
            </q-card-section>
          </q-card>
          <faqs />
         
        </div>
        <!--  end of col-8 -->

        <div class="col-12 col-md-4 order-end">
          <q-card class="info-card q-ma-md fix" elevated bordered>
            <q-card-section>
              <div
                class="text-h5 text-grey-8 text-bold text-center q-mt-md"
              >US $ {{Math.floor(Math.random()*10)+10}} / HOUR</div>
              <q-separator class="q-my-sm" inset />
              <div class="text-center text-body1 text-grey-8 q-pa-md">
                Send a message explaining your needs and
                Asim will reply soon.
              </div>
              <div
                class="text-center text-bold text-grey-9 q-pa-sm"
              >Response time: {{Math.floor(Math.random()*10)+10}} Hrs</div>
              <q-separator class="q-my-sm" inset />

              <q-card-actions>
                <q-btn class="full-width show" color="secondary" to="/connect/tutor">Connect</q-btn>
                <q-btn
                  class="full-width hide fixed-bottom z-max"
                  color="secondary"
                  to="/connect/tutor"
                >Connect</q-btn>
              </q-card-actions>
            </q-card-section>
            <q-card-section>
              <div class="text-center text-body1 text-grey-8 q-pa-sm">
                Share this course with your friend
                <div class="text-center q-pa-sm q-gutter-sm">
                  <q-btn round dense color="grey" class="hover-primary">
                    <i class="text-h6 fab fa-facebook-f"></i>
                  </q-btn>
                  <q-btn round dense color="grey" class="hover-primary">
                    <i class="text-h6 fab fa-twitter"></i>
                  </q-btn>
                  <q-btn round dense color="grey" class="hover-primary">
                    <i class="text-h6 fab fa-linkedin-in"></i>
                  </q-btn>
                  <q-btn round dense color="grey" class="hover-primary">
                    <i class="text-h5 fab fa-google-plus-g"></i>
                  </q-btn>
                  <q-btn round dense color="grey" class="hover-primary">
                    <i class="text-h6 far fa-envelope"></i>
                  </q-btn>
                </div>
              </div>
            </q-card-section>
            <q-card-section class="q-pb-xl"></q-card-section>
          </q-card>
        </div>
      </div>

      <!--  first row -->
      <!-- <div class="row">
        <div class="col-12 col-md-8 q-px-md">
            <div class="text-h6 text-grey-9 q-mx-lg q-py-xl">You May Also Like</div>
        </div>
      </div>-->

      <div class="row" style="display: none;">
        <div class="col-12 col-md-8">
          <q-list class="rounded-borders" style="max-width: 100%;">
            <q-item-label header>
              All Comments
              <q-badge color="grey" text-color="white text-bold" label="24" />
            </q-item-label>

            <q-item>
              <q-item-section avatar>
                <q-avatar>
                  <img src="https://cdn.quasar.dev/img/avatar2.jpg" />
                </q-avatar>
              </q-item-section>

              <q-item-section>
                <q-item-label lines="1">Brunch this weekend?</q-item-label>
                <q-item-label caption lines="2">
                  <span class="text-weight-bold">Janet</span>
                  -- I'll be in your neighborhood doing errands this
                  weekend. Do you want to grab brunch?
                </q-item-label>
                <q-item-label caption lines="1">
                  <a href="#">
                    <span clickable class="text-weight-bold">
                      Like
                      <i class="fas fa-thumbs-up q-pa-sm"></i>
                    </span>
                  </a>
                  <a href="#">
                    <span clickable class="text-weight-bold">
                      Dislike
                      <i class="fas fa-thumbs-down q-pa-sm"></i>
                    </span>
                  </a>
                  <a href="#">
                    <span clickable class="text-weight-bold">
                      Reply
                      <i class="fas fa-reply q-pa-sm"></i>
                    </span>
                  </a>
                  <q-btn-dropdown flat color="primary" label="View more" class="w-40">
                    <q-icon right name="keyboard_arrow_right"></q-icon>
                  </q-btn-dropdown>
                </q-item-label>
              </q-item-section>

              <q-item-section side top>1 min ago</q-item-section>
            </q-item>

            <q-separator inset="item" />

            <q-item>
              <q-item-section avatar>
                <q-avatar>
                  <img src="https://cdn.quasar.dev/img/avatar2.jpg" />
                </q-avatar>
              </q-item-section>

              <q-item-section>
                <q-item-label lines="1">Brunch this weekend?</q-item-label>
                <q-item-label caption lines="2">
                  <span class="text-weight-bold">Janet</span>
                  -- I'll be in your neighborhood doing errands this
                  weekend. Do you want to grab brunch?
                </q-item-label>
                <q-item-label caption lines="1">
                  <span clickable class="text-weight-bold">
                    Like
                    <i class="fas fa-thumbs-up q-pa-sm"></i>
                  </span>
                  <span clickable class="text-weight-bold">
                    Dislike
                    <i class="fas fa-thumbs-down q-pa-sm"></i>
                  </span>
                  <span clickable class="text-weight-bold">
                    Reply
                    <i class="fas fa-reply q-pa-sm"></i>
                  </span>
                </q-item-label>
              </q-item-section>

              <q-item-section side top>1 min ago</q-item-section>
            </q-item>
            <q-item class="q-ml-xl">
              <q-item-section avatar>
                <q-avatar>
                  <img src="https://cdn.quasar.dev/img/avatar2.jpg" />
                </q-avatar>
              </q-item-section>

              <q-item-section>
                <q-item-label lines="1">Brunch this weekend?</q-item-label>
                <q-item-label caption lines="2">
                  <span class="text-weight-bold">Janet</span>Testimonials
                  -- I'll be in your neighborhood doing errands this
                  weekend. Do you want to grab brunch?
                </q-item-label>
                <q-item-label caption lines="1">
                  <span clickable class="text-weight-bold">
                    Like
                    <i class="fas fa-thumbs-up q-pa-sm"></i>
                  </span>
                  <span clickable class="text-weight-bold">
                    Dislike
                    <i class="fas fa-thumbs-down q-pa-sm"></i>
                  </span>
                  <span clickable class="text-weight-bold">
                    Reply
                    <i class="fas fa-reply q-pa-sm"></i>
                  </span>
                </q-item-label>
              </q-item-section>

              <q-item-section side top>1 min ago</q-item-section>
            </q-item>
          </q-list>
          <q-btn class="float-right q-ma-xl" color="primary" label="Show more comments" />
        </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>
    </transition>
  </q-layout>
</template>

<script>
import { fabGithub } from "@quasar/extras/fontawesome-v5";
const photos = [
  "1.jpg",
  "2.jpg",
  "3.jpg",
  "4.jpg",
  "5.jpg",
  "6.jpg",
  "7.jpg",
  "8.jpg",
  "9.jpg",
  "10.jpg",
  "11.jpg",
  "12.jpg"
];
const avatars = [
  "photo1.jpg",
  "photo2.jpg",
  "photo3.jpg",
  "photo4.jpg",
  "photo5.jpg",
  "photo6.jpg",
  "photo7.jpg",
  "photo8.jpg",
  "photo9.jpg",
  "photo10.jpg",
  "photo11.jpg",
  "photo12.jpg"
];
const stringOptions = [
  "quasarframework/quasar",
  "quasarframework/quasar-awesome"
];
export default {
  //   name: "MyLayout",
  data() {
    return {
      text: "",
      readMore: false,
      readMore2: false,
      moreComments: false,
      morePoints: false,
      moreSkills: false,
      options: null,
      left: false,
      miniState: true,
      slide1: 1,
      slide2: 1,
      photo: photos,
      avatar: avatars,
      slide: 1,
      slides: "style",
      topics: [
        "",
        "Internal Medicine",
        "Surgery",
        "Peads",
        "Cardiovascular",
        "Git"
      ],
      days: [
        "",
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
      ],
      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: []
    };
  },
   components: {
    "faqs": require("components/FaqsLink.vue").default
  },
  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;
}
.bullets ul {
  list-style: none;
  padding: 0;
}
.bullets ul li {
  width: 49%;
  display: inline-block;
  vertical-align: top;
  padding: 10px 0;
  font-size: 18px;
}
.bullets li::before {
  content: "\2713";
  padding-right: 10px;
  color: green;
  font-weight: 900;
}

.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;
}
a {
  text-decoration: none;
  color: #04b1ed;
}

.grn-v-bar {
  border-left: 3px solid transparent;
}

.grn-v-bar:hover {
  border-left: 3px solid green;
}
.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;
}
.fix {
  position: fixed;
}
.text-hover {
  transition: all 2s;
}
.text-hover:hover .hidden {
  transition: all 2s;
  color: #04b1ed;
  display: block !important;
}

.hover-primary {
  background: inherit;
  transition: all 1s;
}
.hover-primary:hover {
  background: #1976d2 !important;
  transition: all 0.6s;
}
.order-start {
  order: 1;
}
.order-end {
  order: 2;
}
.list ul {
  list-style: none;
}
.list ul li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.list ul li:not(:last-child):after {
  content: "\27A4";
  color: #04b1ed;
  font-size: 14px;
  padding: 10px 5px;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .fix {
    position: relative;
  }
  .btn-center {
    text-align: center;
  }
  .order-start {
    order: 2;
  }
  .order-end {
    order: 1;
  }
  .bullets ul li {
    width: 100%;
    display: block;
  }
  .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: 92%;
    max-height: 420px;
  }
  .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>
