<template>
  <q-layout class="bg-white q-mt-xl">
    <transition appear enter-active-class="animated slideInLeft" leave-active-class="hidden">
      <div class="row flex flex-center">
        <div class="col-12 col-md-8 col-sm-12 col-xs-12">
          <q-card class="q-ma-sm" elevated bordered>
            <q-card-section>
              <div class="text-grey-8 text-bold text-center">
                <div class="text-h4 text-bold">Forgot Your Password?</div>
                <div class="text-body1 q-py-md">Input your registered email to reset your password</div>
              </div>
              <q-form @submit="onSubmit">
                <div class="row">
                  <div class="col-12 col-md-12 q-pa-sm">
                    <q-input
                      outlined
                      v-model="mail"
                      dense
                      type="email"
                      label="Email"
                      hint="Enter email adress i.e ( abc@domain.com)"
                    />
                  </div>
                  <div class="col-12 col-md-12 q-pa-sm">
                    <q-input
                      v-model="password"
                      outlined
                      dense
                      :type="isPwd ? 'password' : 'text'"
                      hint="Password with toggle"
                    >
                      <template v-slot:append>
                        <q-icon
                          :name="isPwd ? 'visibility_off' : 'visibility'"
                          class="cursor-pointer"
                          @click="isPwd = !isPwd"
                        />
                      </template>
                    </q-input>
                  </div>
                </div>
                <div class="row justify-between">
                  <div class="q-pa-sm">
                    Need Help?
                    <a href="/#/forgot">Forgot pasword</a>
                  </div>
                  <div class="q-pa-sm">
                    <q-checkbox v-model="remember" label="Remember me" />
                  </div>
                </div>
                <div class="col-12">
                  <q-btn color="secondary" class="full-width">login</q-btn>
                </div>
              </q-form>
            </q-card-section>

            <q-card-section>
              <div class="row flex-center">
                <div class="q-pa-sm">
                  Don't have an accouunt?
                  <a href="/#/signup">Sign up</a>
                </div>
              </div>
            </q-card-section>
          </q-card>
        </div>
      </div>

      <footer>
        <div class="q-pa-xs bg-grey-10" style="width:100%;">
          <div class style="border-bottom:1px solid #555;height:auto;">
            <div class="q-pa-xs bg-grey-10 text-white row">
              <q-list dark style="max-width: auto">
                <q-expansion-item default-opened label="DOCEXAMS">
                  <q-item clickable v-ripple>
                    <q-item-section>About Us</q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>Contact Us</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>How it Works</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>Privacy Policy</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>Refund Policy</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>Testimonials</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>Sitemap</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>Help</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-expansion-item>
                <q-expansion-item default-opened label="PARTNER WITH US">
                  <q-item clickable v-ripple>
                    <q-item-section>Work for us</q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>Academic Partners</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-expansion-item>
              </q-list>
              <q-list dark class style="max-width: auto">
                <q-expansion-item default-opened label="STUDENTS">
                  <q-item clickable v-ripple>
                    <q-item-section>Sign In</q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>Find Course</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>Find Qbank</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>Find Tutor</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>How it works</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>FAQs</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-expansion-item>
                <q-expansion-item default-opened label="TUTORS">
                  <q-item clickable v-ripple>
                    <q-item-section>Sign In</q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>Become a Tutor</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>FAQs</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-expansion-item>
              </q-list>
              <q-list dark style="min-width: auto">
                <q-expansion-item default-opened label="FEATURED EXAMS">
                  <q-item clickable v-ripple>
                    <q-item-section>MOH UAE</q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>DHA</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>HAAD</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>MOH Oman</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>MOH Kuwait</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>SLE</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>DUCH</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>MCPS</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>FCPS</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>PM &amp; DC</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>USMLE</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>PLAB</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-expansion-item>
              </q-list>
              <q-list dark style="min-width: auto">
                <q-expansion-item default-opened label="FEATURED EXAMS">
                  <q-item clickable v-ripple>
                    <q-item-section>AMC</q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>MCCEE</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>MCCQE</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>MRCP</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>MRCS</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>MRCOG</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>ORE (UK)</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>NBDE (USA)</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>ADC (Australia)</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>NDEB (Canada)</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>NAPLEX</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section>
                      <q-item-label>NCLEX</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-expansion-item>
              </q-list>
              <q-list dark style="max-width: auto">
                <q-expansion-item default-opened label="CONNECT WITH US">
                  <q-item clickable v-ripple>
                    <q-item-section class="q-pa-none" avatar>
                      <svg
                        style="width:18px;height:18px;margin-left:-2px;"
                        aria-hidden="true"
                        role="presentation"
                        focusable="false"
                        viewBox="0 0 24 24"
                        class="q-icon notranslate"
                      >
                        <path
                          d="M14,13H9.95A1,1 0 0,0 8.95,14A1,1 0 0,0 9.95,15H14A1,1 0 0,0 15,14A1,1 0 0,0 14,13M9.95,10H12.55A1,1 0 0,0 13.55,9A1,1 0 0,0 12.55,8H9.95A1,1 0 0,0 8.95,9A1,1 0 0,0 9.95,10M16,9V10A1,1 0 0,0 17,11A1,1 0 0,1 18,12V15A3,3 0 0,1 15,18H9A3,3 0 0,1 6,15V8A3,3 0 0,1 9,5H13A3,3 0 0,1 16,8M20,2H4C2.89,2 2,2.89 2,4V20A2,2 0 0,0 4,22H20A2,2 0 0,0 22,20V4C22,2.89 21.1,2 20,2Z"
                        />
                      </svg>
                    </q-item-section>
                    <q-item-section>Blog</q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section avatar>
                      <i class="fab fa-facebook-square"></i>
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>Facebook</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section avatar>
                      <i class="fab fa-linkedin"></i>
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>LinkedIn</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section avatar>
                      <i class="fab fa-twitter-square"></i>
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>Twitter</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section avatar>
                      <i class="fab fa-google-plus-g"></i>
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>Google +</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section avatar>
                      <i class="fab fa-youtube"></i>
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>Youtube</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section avatar>
                      <i class="fab fa-skype"></i>
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>Skype:</q-item-label>
                      <q-item-label caption>Docexams</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section avatar>
                      <i class="fab fa-whatsapp"></i>
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>Whatsapp #</q-item-label>
                      <q-item-label caption>+92 345 2410728</q-item-label>
                    </q-item-section>
                  </q-item>
                  <q-item clickable v-ripple>
                    <q-item-section avatar>
                      <i class="fab fa-whatsapp"></i>
                    </q-item-section>
                    <q-item-section>
                      <q-item-label>imo #</q-item-label>
                      <q-item-label caption>+92 345 2410728</q-item-label>
                    </q-item-section>
                  </q-item>
                </q-expansion-item>
              </q-list>
            </div>
          </div>
        </div>
        <div
          class="text-center q-pa-sm bg-grey-10"
          style="height:40px;color:white;width:100%;"
        >&copy;&nbsp;&nbsp;2020-2021 DocExams - All Rights Reserved</div>
      </footer>

      <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 stringOptions = [
  "quasarframework/quasar",
  "quasarframework/quasar-awesome"
];
export default {
  data() {
    return {
      password: '',
      isPwd: true,
      remember: false
    };
  },
   methods: {
    onSubmit (evt) {
      const formData = new FormData(evt.target)
      const submitResult = []

      for (const [ name, value ] of formData.entries()) {
        submitResult.push({
          name,
          value
        })
      }

      this.submitResult = submitResult
    }
  }
};
</script>

<style lang="css" scoped>
.show {
  display: inline !important;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .show {
    display: none !important;
  }
}
</style>

