<template>
  <q-layout class="bg-white shadow-24 q-px-md">
    <transition appear enter-active-class="animated slideInUp" 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-video src="https://www.youtube.com/embed/P_B-ZZ705zo" />
                </div>
              </div>
              <div class="col-8 col-md-8 col-sm-12 col-xs-12 q-pa-md text-center text-grey-8">
                <div class="text-h4 text-bold text-grey-9">Pharmacy</div>
                <div
                  class="text-subtitle1"
                >Fastest growing list of qualified tutors from globally recognized medical institutions. growing list of qualified tutors from medical institutions.</div>
                <div class="q-pa-md">
                  <div class="q-gutter-y-md row">
                    <div class="q-pa-sm">
                      <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-sm">
                      <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-sm">(96% positive)</div>
                  </div>
                </div>
                <div class="text-green text-body1 text-bold">
                  <q-icon size="sm" name="verified_user" />Course satisfaction guarantee
                </div>
                <div class="text-blue text-body1 q-py-md">
                  <q-icon size="sm" name="forum" />
                  <a href="/#/tutor/stdtesti">Testimonials</a>
                </div>
              </div>
            </div>
          </q-card-section>
        </q-card>
        <div class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs">Policies</div>
        <q-card class="q-mx-md q-my-sm" elevated bordered>
          <q-card-section>
            <div class="row q-pa-sm">
              <div class="col-6 text-h6 text-weight-regular text-grey-8">
                <q-icon size="md" class="q-pa-md" name="group" />
                <span class="q-pa-md">Nature:</span>
              </div>
              <div class="col-6 text-h6 text-weight-regular text-grey-8">One on One</div>
            </div>
            <div class="row q-pa-sm">
              <div class="col-6 text-h6 text-weight-regular text-grey-8">
                <q-icon size="md" class="q-pa-md" name="ac_unit" />
                <span class="q-pa-md">Mode:</span>
              </div>
              <div class="col-6 text-h6 text-weight-regular text-grey-8">Live Online</div>
            </div>
            <div class="row q-pa-sm">
              <div class="col-6 text-h6 text-weight-regular text-grey-8">
                <q-icon size="md" class="q-pa-md" name="date_range" />
                <span class="q-pa-md">Timing:</span>
              </div>
              <div
                class="col-6 text-h6 text-weight-regular text-grey-8"
              >Wednesday 01:41:00 am - 01:41:00 am</div>
            </div>
            <div class="row q-pa-sm">
              <div class="col-6 text-h6 text-weight-regular text-grey-8">
                <q-icon size="md" class="q-pa-md" name="bar_chart" />
                <span class="q-pa-md">Level:</span>
              </div>
              <div class="col-6 text-h6 text-weight-regular text-grey-8">Advance</div>
            </div>
            <div class="row q-pa-sm">
              <div class="col-6 text-h6 text-weight-regular text-grey-8">
                <q-icon size="md" class="q-pa-md" name="language" />
                <span class="q-pa-md">Language:</span>
              </div>
              <div class="col-6 text-h6 text-weight-regular text-grey-8">Hindi / Urdu</div>
            </div>
          </q-card-section>
        </q-card>
        <div class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs">About This Course</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">What You’ll Learn</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>
                <ul>
                  <li>laskjdfl;jsdlkf</li>
                  <li>shdfl;kjsldjf</li>
                  <li>sadkfhsdhf</li>

                  <span v-if="morePoints"></span>
                  <span v-else>...</span>
                </ul>
              </div>

              <div v-show="morePoints">
                <ul>
                  <li>laskjdfl;jsdlkf</li>
                  <li>shdfl;kjsldjf</li>
                  <li>sadkfhsdhf</li>
                  <li>laskjdfl;jsdlkf</li>
                  <li>shdfl;kjsldjf</li>
                  <li>sadkfhsdhf</li>
                  <li>laskjdfl;jsdlkf</li>
                  <li>shdfl;kjsldjf</li>
                  <li>sadkfhsdhf</li>
                  <li>laskjdfl;jsdlkf</li>
                  <li>shdfl;kjsldjf</li>
                  <li>sadkfhsdhf</li>
                  <li>laskjdfl;jsdlkf</li>
                  <li>shdfl;kjsldjf</li>
                  <li>sadkfhsdhf</li>
                  <li>laskjdfl;jsdlkf</li>
                  <li>shdfl;kjsldjf</li>
                  <li>sadkfhsdhf</li>
                </ul>
              </div>
              <q-btn flat color="primary" @click="morePoints =! morePoints">
                <span v-if="morePoints">- 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">Course Contents</div>
        <q-card class="q-mx-md q-my-sm" elevated bordered>
          <q-card-section>
            <q-list>
              <q-expansion-item
                switch-toggle-side
                expand-icon="add"
                expanded-icon="remove"
                group="somegroup"
                label="Internal Medicine"
                default-opened
                header-class="text-grey-9 bg-grey-3 q-my-xs"
              >
                <template v-slot:header>
                  <q-item-section>Behavioural Science</q-item-section>
                  <q-item-section side>
                    <div class="row items-center">{{Math.floor(Math.random()*100)}} hours</div>
                  </q-item-section>
                </template>
                <q-card>
                  <q-card-section>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
                    commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
                    eveniet doloribus ullam aliquid.
                  </q-card-section>
                </q-card>
              </q-expansion-item>

              <q-expansion-item
                switch-toggle-side
                expand-icon="add"
                expanded-icon="remove"
                group="somegroup"
                label="Surgery"
                header-class="text-grey-9 bg-grey-3 q-my-xs"
              >
                <template v-slot:header>
                  <q-item-section>Behavioural Science</q-item-section>
                  <q-item-section side>
                    <div class="row items-center">{{Math.floor(Math.random()*100)}} hours</div>
                  </q-item-section>
                </template>
                <q-card>
                  <q-card-section>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
                    commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
                    eveniet doloribus ullam aliquid.
                  </q-card-section>
                </q-card>
              </q-expansion-item>

              <q-expansion-item
                switch-toggle-side
                expand-icon="add"
                expanded-icon="remove"
                group="somegroup"
                label="Peads"
                header-class="text-grey-9 bg-grey-3 q-my-xs"
              >
                <template v-slot:header>
                  <q-item-section>Behavioural Science</q-item-section>
                  <q-item-section side>
                    <div class="row items-center">{{Math.floor(Math.random()*100)}} hours</div>
                  </q-item-section>
                </template>
                <q-card>
                  <q-card-section>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
                    commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
                    eveniet doloribus ullam aliquid.
                  </q-card-section>
                </q-card>
              </q-expansion-item>

              <q-expansion-item
                switch-toggle-side
                expand-icon="add"
                expanded-icon="remove"
                group="somegroup"
                label="Behavioural Science"
                header-class="text-grey-9 bg-grey-3 q-my-xs"
              >
                <template v-slot:header>
                  <q-item-section>Behavioural Science</q-item-section>
                  <q-item-section side>
                    <div class="row items-center">{{Math.floor(Math.random()*100)}} hours</div>
                  </q-item-section>
                </template>
                <q-card class>
                  <q-card-section>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
                    commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
                    eveniet doloribus ullam aliquid.
                  </q-card-section>
                </q-card>
              </q-expansion-item>
            </q-list>
          </q-card-section>
        </q-card>
        <div class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs">Teaching Methodologies</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">Meet The Instructors</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="200px"
            >
              <q-carousel-slide :name="1" class="column no-wrap">
                <div class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap">
                  <q-img
                    v-if="x = Math.floor((Math.random() * 10) + 1)"
                    class="hover-fx rounded-borders col-md-3 col-sm-6 col-xs-6 full-height show"
                    :src="'statics/'+ photo[x]"
                  >
                    <div class="absolute-bottom text-subtitle1 text-center">
                      <a href="/#/pay">Dr. Natasha</a>
                    </div>
                  </q-img>
                  <q-img
                    v-if="x = Math.floor((Math.random() * 10) + 1)"
                    class="hover-fx rounded-borders col-md-3 col-sm-6 col-xs-6 full-height show"
                    :src="'statics/'+ photo[x]"
                  >
                    <div class="absolute-bottom text-subtitle1 text-center text-hover">
                      Dr. Alize Jaffri
                      <div class="text-caption hidden">Consulting Doctor</div>
                      <div class="text-caption hidden">National Hospital</div>
                    </div>
                  </q-img>
                  <q-img
                    v-if="Math.random()"
                    class="hover-fx rounded-borders col-md-3 col-sm-6 col-xs-6 full-height"
                    src="statics/photo3.jpg"
                  >
                    <div class="absolute-bottom text-subtitle2 text-center text-hover">
                      Dr. Dale A. Schouten
                      <div class="text-caption hidden">Consulting Doctor</div>
                      <div class="text-caption hidden">National Hospital</div>
                    </div>
                  </q-img>
                  <q-img
                    class="hover-fx rounded-borders col-md-3 col-sm-6 col-xs-6 full-height"
                    src="statics/photo4.jpg"
                  >
                    <div class="absolute-bottom text-subtitle1 text-center text-hover">
                      Dr. Malhiya
                      <div class="text-caption hidden">Consulting Doctor</div>
                      <div class="text-caption hidden">National Hospital</div>
                    </div>
                  </q-img>
                </div>
              </q-carousel-slide>
              <q-carousel-slide :name="2" class="column no-wrap">
                <div class="row fit justify-start items-center q-gutter-xs q-col-gutter no-wrap">
                  <q-img
                    class="hover-fx rounded-borders col-md-3 col-sm-6 col-xs-6 full-height"
                    src="statics/photo5.jpg"
                  >
                    <div class="absolute-bottom text-subtitle1 text-center">
                      <a href="/#/pay">Dr. Natasha</a>
                    </div>
                  </q-img>
                  <q-img
                    class="hover-fx rounded-borders col-md-3 col-sm-6 col-xs-6 full-height"
                    src="statics/photo6.jpg"
                  >
                    <div class="absolute-bottom text-subtitle1 text-center">
                      <a href="/#/pay">Dr. Natasha</a>
                    </div>
                  </q-img>
                  <q-img
                    class="hover-fx rounded-borders col-md-3 col-sm-6 col-xs-6 show full-height"
                    src="statics/photo7.jpg"
                  >
                    <div class="absolute-bottom text-subtitle1 text-center">
                      <a href="/#/pay">Dr. Natasha</a>
                    </div>
                  </q-img>
                  <q-img
                    class="hover-fx rounded-borders col-md-3 col-sm-6 col-xs-6 show full-height"
                    src="statics/photo8.jpg"
                  >
                    <div class="absolute-bottom text-subtitle1 text-center">
                      <a href="/#/pay">Dr. Natasha</a>
                    </div>
                  </q-img>
                </div>
              </q-carousel-slide>
            </q-carousel>
          </q-card-section>
        </q-card>
        <div class="text-h5 text-grey-9 text-bold q-pa-md q-my-xs">More Features</div>
        <q-card class="q-mx-md q-my-sm no-shadow bg-grey-3" bordered>
          <q-card-section class>
            <div class="q-pa-md text-body1 text-grey-8 bullets">
              <ul>
                <li>Class Recording</li>
                <li>Join from computer/mobile etc.</li>
                <li>Mock Tests</li>
                <li>Study Notes</li>
              </ul>
            </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/'+ photo[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>
       <faqs />
      </div>
      <!--  end of col-8 -->

      <div class="col-12 col-md-4 order-end">
        <q-card class="info-card q-ma-md fix" style="z-index: 1030" elevated bordered>
          <q-card-section>
            <div class="text-h5 text-center">
              US $
              <span class="text-strike text-grey-7 text-body1">700</span>
              <span class="text-red-10">800</span>
            </div>
            <div class="text-center text-body1 text-grey-8 q-pa-md">
              <q-icon name="event_note" />Last Registration Date
              <div class="text-blue-8">08/05/2020</div>
            </div>
            <div class="text-center text-body1 text-grey-8 q-pa-sm">Course starts on 20 / May / 2020</div>
            <q-separator class="q-my-sm" inset />
            <div class="text-center text-body1 text-grey-8 q-pa-md row justify-evenly">
              <div>
                <q-icon size="sm" name="update" />Duration
              </div>
              <div class="text-blue-8">34 Weeks</div>
            </div>
            <q-separator class="q-my-sm" inset />
            <q-card-actions>
              <q-btn class="full-width show" color="secondary" to="/cart">Add to Cart</q-btn>
              <q-btn class="full-width hide fixed-bottom z-max" color="secondary" to="/cart">Add to Cart</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>
      <keep-alive>
        <router-view />
      </keep-alive>
    </q-page-container>
    </transition>
  </q-layout>
</template>

<script>
import { fabGithub } from "@quasar/extras/fontawesome-v5";
const photos = [
  "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,
      options: null,
      left: false,
      miniState: true,
      slide1: 1,
      slide2: 1,
      photo: photos,
      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: []
    };
  },
   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;
}
@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>
