<template>
  <q-layout class="bg-white shadow-24">
    <div class="q-pa-none q-ma-none row top-slider">
      <div class="col-12 col-md-6">
        <div class="slider-l q-pt-xl q-px-xl">
          <h3 class="h1-title text-white text-bold h4-title-mob">Welcome to DocExams Blog</h3>
          <h4 class="text-white show">Ultimate information resource for Medical Licensing Exams</h4>
        </div>
      </div>
      <div class="col-12 col-md-6">
        <q-img transition="slide-left" class="header-img" src="statics/blogImg.png"></q-img>
      </div>
    </div>

    <div class="row q-pa-md q-ma-md">
      <div class="col-12 col-md-12"></div>
    </div>

    <div class="row">
      <div class="col-8 col-md-8 col-sm-12 col-xs-12 q-pa-lg text-grey-8">
        <q-tabs
          v-model="tab"
          dense
          align="left"
          class="bg-white text-grey-9"
          :breakpoint="0"
          indicator-color="secondary"
          active-bg-color="green-1"
        >
          <q-route-tab name="all" to="/blog">All Post</q-route-tab>
          <q-route-tab name="medi" to="/faqs-details">Medicine</q-route-tab>
          <q-route-tab name="dents" to="/blog">Dentistry</q-route-tab>
          <q-route-tab name="nurs" to="/blog">Nursing</q-route-tab>
          <q-route-tab name="pharma" to="/blog">Pharmacy</q-route-tab>
          <q-route-tab name="pedia" to="/blog">Pediatrics</q-route-tab>
          <q-route-tab name="obs" to="/blog">Obs &amp; Gynae</q-route-tab>
          <q-route-tab name="ortho" to="/blog">Orthodontic</q-route-tab>
          <q-route-tab name="endo" to="/blog">Endodontic</q-route-tab>
          <q-route-tab name="prostho" to="/blog">Prosthodontics</q-route-tab>
          <q-route-tab name="general" to="/blog">General Surgery</q-route-tab>
          <q-route-tab name="pedi" to="/blog">Pediatric Dentistry</q-route-tab>
        </q-tabs>
        <q-separator />

        <q-tab-panels v-model="tab" animated>
          <q-tab-panel name="all" class="text-body1">
            <div v-for="n in 3" :key="n">
              <div
                class="text-h4 text-grey-9"
              >Why Facebook Advertising Is Crucial For ECommerce Right Now</div>
              <div class="text-caption q-py-md">
                Posted on
                <a href class="anchor">October 17, 2017</a> by Neil Kokemuller
                <q-avatar>
                  <img src="statics/photo1.jpg" alt="user photo" />
                </q-avatar>
              </div>
              <article>
                <q-img src="statics/blgImg.jpg" alt="blog image" />
                <div
                  class="q-py-sm"
                >Every time people think Facebook can’t achieve greater relevance, companies figure out more powerful ways to leverage its impressive advertising platform to connect with a targeted audience. In eCommerce, Facebook advertising is hotter than ever.</div>
                <div
                  class="q-py-sm"
                >The following is an overview of Facebook advertising in eCommerce, including the types of strategies that pay off, anticipated results and tips for success!</div>
                <div class="text-h5 text-bold">Is It Worth It?</div>
                <div
                  class="q-py-sm"
                >A recent report from Marketing Insider Group noted that typical eCommerce firms miss out on thousands of dollars in monthly revenue by ignoring Facebook. In fact, the company cited a marketer who helped a client achieve a 5,601% return on Facebook ad spend in just one onth. While not all companies reach this level, this example depicts the potential economic efficiency your business can achieve.</div>

                <div class="row">
                  <div class="col-5 col-md-5 col-xs-12 flex flex-center">
                    <div class="q-pa-md q-gutter-sm">
                      <q-btn
                        class="btn-fixed-width"
                        color="lightgrey text-grey-8 rounded-border"
                        icon="chat"
                      >0 Comment(s)</q-btn>
                    </div>
                  </div>
                  <div class="col-7 col-md-7 col-xs-12 flex flex-center">
                    <div class="q-pa-md q-gutter-sm">
                      <q-btn round color="primary">
                        <i class="text-h5 fab fa-facebook-f"></i>
                      </q-btn>
                      <q-btn round color="primary">
                        <i class="text-h5 fab fa-twitter"></i>
                      </q-btn>
                      <q-btn round color="primary">
                        <i class="text-h5 fab fa-linkedin-in"></i>
                      </q-btn>
                      <q-btn round color="primary">
                        <i class="text-h5 fab fa-google-plus-g"></i>
                      </q-btn>
                      <q-btn round color="primary">
                        <i class="text-h5 far fa-envelope"></i>
                      </q-btn>
                    </div>
                  </div>
                </div>
                <q-btn outline size="sm" color="primary" to="/blog-details">Read More</q-btn>
              </article>
            </div>
          </q-tab-panel>

          <q-tab-panel name="medi" id="link">
            <div class="text-h6">Medicine</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates inventore, sit deserunt asperiores consequuntur doloribus exercitationem aspernatur placeat facere quasi magni tenetur nisi quis debitis, eos sint provident molestias ullam?
          </q-tab-panel>
          <q-tab-panel name="dents">
            <div class="text-h6">Dentistry</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates inventore, sit deserunt asperiores consequuntur doloribus exercitationem aspernatur placeat facere quasi magni tenetur nisi quis debitis, eos sint provident molestias ullam?
          </q-tab-panel>
          <q-tab-panel name="nurs">
            <div class="text-h6">Nursing</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates inventore, sit deserunt asperiores consequuntur doloribus exercitationem aspernatur placeat facere quasi magni tenetur nisi quis debitis, eos sint provident molestias ullam?
          </q-tab-panel>
          <q-tab-panel name="pharma">
            <div class="text-h6">Pharmacy</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates inventore, sit deserunt asperiores consequuntur doloribus exercitationem aspernatur placeat facere quasi magni tenetur nisi quis debitis, eos sint provident molestias ullam?
          </q-tab-panel>
          <q-tab-panel name="pedia">
            <div class="text-h6">Pediatrics</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates inventore, sit deserunt asperiores consequuntur doloribus exercitationem aspernatur placeat facere quasi magni tenetur nisi quis debitis, eos sint provident molestias ullam?
          </q-tab-panel>
          <q-tab-panel name="obs">
            <div class="text-h6">Obs &amp; Gynae</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates inventore, sit deserunt asperiores consequuntur doloribus exercitationem aspernatur placeat facere quasi magni tenetur nisi quis debitis, eos sint provident molestias ullam?
          </q-tab-panel>
          <q-tab-panel name="ortho">
            <div class="text-h6">Orthodontic</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates inventore, sit deserunt asperiores consequuntur doloribus exercitationem aspernatur placeat facere quasi magni tenetur nisi quis debitis, eos sint provident molestias ullam?
          </q-tab-panel>
          <q-tab-panel name="endo">
            <div class="text-h6">Endodontic</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates inventore, sit deserunt asperiores consequuntur doloribus exercitationem aspernatur placeat facere quasi magni tenetur nisi quis debitis, eos sint provident molestias ullam?
          </q-tab-panel>
          <q-tab-panel name="prostho">
            <div class="text-h6">Prosthodontics</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates inventore, sit deserunt asperiores consequuntur doloribus exercitationem aspernatur placeat facere quasi magni tenetur nisi quis debitis, eos sint provident molestias ullam?
          </q-tab-panel>
          <q-tab-panel name="general">
            <div class="text-h6">General Surgery</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates inventore, sit deserunt asperiores consequuntur doloribus exercitationem aspernatur placeat facere quasi magni tenetur nisi quis debitis, eos sint provident molestias ullam?
          </q-tab-panel>
          <q-tab-panel name="pedi">
            <div class="text-h6">Pediatric Dentistry</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates inventore, sit deserunt asperiores consequuntur doloribus exercitationem aspernatur placeat facere quasi magni tenetur nisi quis debitis, eos sint provident molestias ullam?
          </q-tab-panel>
        </q-tab-panels>
      </div>

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

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

              <q-expansion-item label="Info 2" :content-inset-level="0.5">
                <q-item clickable v-ripple>
                  <q-item-section>Info-1-1</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>Info-2-2</q-item-section>
                </q-item>
                <q-item clickable v-ripple>
                  <q-item-section>Info-2-3</q-item-section>
                </q-item>
              </q-expansion-item>
            </q-expansion-item>
          </q-list>
        </div>
      </div>
    </q-drawer>
    <q-page-container>
      <keep-alive>
        <router-view />
      </keep-alive>
    </q-page-container>
  </q-layout>
</template>

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

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

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

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

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

.my-card-tuts {
  width: 100%;
  max-width: 500px;
}
.header-img {
  width: 50%;
  float: right;
}
.col-height {
  height: 380px;
}

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

.wide {
  width: 80%;
}

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

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

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

.hide {
  display: none;
}

.show {
  display: inline;
}

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

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

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

.no-underline a:hover .i-rotate {
  transform: rotate(90deg);
  transition: all 0.5s ease;
}
.anchor {
  text-decoration: none;
  color: #04b1ed;
}
.q-item {
  min-height: 24px;
  padding: 2px 46px;
  color: inherit;
  transition: color 0.3s, background-color 0.3s;
}

.content {
  max-width: 60%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.w-40 {
  width: 40%;
}

.w-50 {
  width: 50%;
}

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

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

.face-card {
  width: 25%;
}

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

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

  border-bottom: 1px dashed #d1d1d1;
}
.links__set li a {
  color: #7b7b7b;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .btn-center {
    text-align: center;
  }
  .header-img {
    width: 100%;
    float: none;
    clear: both;
  }
  .q-mt-lg {
    margin-left: 15px;
  }

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

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

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

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

  .face-card {
    width: 45%;
  }

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

  .hide {
    display: inline;
  }

  .show {
    display: none;
  }

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

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

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

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

  .h5-title {
    display: none;
  }

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

  .top-slider {
    height: 70vh;
  }

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

  .col-height {
    height: auto;
  }

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

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

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

  .db-menu {
    width: 50vw;
  }

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

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

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

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