<template>
  <transition appear enter-active-class="animated slideInRight" leave-active-class="hidden">
    <div class="bg-white shadow-24">
      <div class="row q-pa-md">
        <div class="col-3 col-md-3 show" name="course">
          <search-filters :searchFilter="searchFilter" />
        </div>

        <div class="col-9 col-md-9 col-sm-12 col-xs-12">
          <div class="q-pa-mdd">
            <q-btn class="hide" label="Filter" color="primary" dense flat icon="sort" @click="right = !right" />
            <div class="row flex items-center q-my-lg">
              <div class="col-9 q-ma-xs">
                <q-select
                  outlined
                  dense
                  v-model="model1"
                  clearable
                  use-input
                  hide-selected
                  fill-input
                  input-debounce="0"
                  label="Browse Qbanks"
                  :options="options"
                  @filter="filterFnAutoselect"
                  @filter-abort="abortFilterFn"
                >
                  <template v-slot:no-option>
                    <q-item>
                      <q-item-section class="text-grey">No results</q-item-section>
                    </q-item>
                  </template>
                </q-select>
              </div>

              <div class="col-2">
                <q-btn color="secondary" label="Search" />
              </div>
            </div>
            <div class="text-h5 q-pb-md">Showing Courses</div>
            <div>
              <div class="text-h6 text-grey-6 q-pb-md flex justify-between">
                <span>Applied Filters:</span>
                <q-btn dense size="sm" color="primary">Clear Filter</q-btn>
              </div>
              <q-chip
                v-for="n in 2"
                :key="n"
                outline
                removable
                v-model="filters"
                @remove="log('Filters')"
                color="primary"
                text-color="white"
              >{{topics[n]}}</q-chip>
            </div>

            <div class="q-pa-md row items-start q-gutter-lg flex-center">
              <q-card class="hover-fx my-card bg-grey-1" v-for="cards in 6" :key="cards">
                <img width="265px" height="95px" :src="'statics/'+ photo[cards]" />
                <q-card-section>
                  <q-avatar
                    class="q-pa-none absolute"
                    circled
                    size="50px"
                    style="top: 0; left: 12px; transform: translateY(-50%);"
                  >
                    <img src="statics/avtr.png" />
                  </q-avatar>
                  <span class="text-subtitle2 q-pt-xl l-h">John Doe</span>
                  <q-avatar
                    class="q-pa-none absolute"
                    circled
                    size="50px"
                    style="top:0; left: 90px; transform: translateY(-50%);"
                  >
                    <img src="statics/avtr.png" />
                  </q-avatar>
                  <span class="text-subtitle2 q-pt-xl q-pl-md l-h">John Doe</span>
                </q-card-section>

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

                  <div
                    class="q-pa-md"
                    style="max-width:265px;"
                  >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi adipisci odit illum necessitatibus est et nemo esse ducimus architecto distinctio amet consectetur tempora temporibus omnis, optio provident, quisquam, ad obcaecati!</div>
                  <div class="q-pa-md text-center">Starts: July,28,2019</div>
                  <div class="text-h6 text-center">
                    US $
                    <span class="text-strike">60</span>
                    <span style="color:#d10000;font-size: 24px;">80</span>
                  </div>
                </q-card-section>
                <q-card-section class="flex flex-center">
                  <q-btn size="md" color="primary" label="More Details" to="/course/details" />
                </q-card-section>
              </q-card>
            </div>
            <q-card>
              <q-card-section class="q-mt-lg">
                <div class="q-pa-xs flex flex-center">
                  <q-pagination v-model="current" :max="5" input input-class="text-orange-10" />
                </div>
              </q-card-section>
            </q-card>
          </div>
        </div>
      </div>
      <q-drawer v-model="right" side="right">
        <div class="full-width bg-white">
          <search-filters :searchFilter="searchFilter" />
        </div>
      </q-drawer>
    </div>
  </transition>
</template>

<script>
const photos = [
  "1.jpg",
  "2.jpg",
  "3.jpg",
  "4.jpg",
  "5.jpg",
  "6.jpg",
  "7.jpg",
  "8.jpg",
  "9.jpg",
  "10.jpg"
];

export default {
  data() {
    return {
      searchFilter: "course",
      filters: true,
      right: false,
      current: 3,
      model1: null,
      model2: null,
      photo: photos,
      topics: [
        "",
        "Internal Medicine",
        "Surgery",
        "Peads",
        "Cardiovascular",
        "Git"
      ]
    };
  },
  components: {
    "search-filters": require("components/SearchFilters.vue").default
  }
};
</script>

<style lang="css" scoped>
.hide {
  display: none;
}

.show {
  display: inline;
}

.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;
}

a {
  text-decoration: none;
  color: #04b1ed;
  font-weight: 400;
}

@media only screen and (min-width: 0px) and (max-width: 900px) {
  .hide {
    display: inline;
  }

  .show {
    display: none;
  }
}

@media only screen and (min-width: 899px) and (max-width: 1280px) {
}
</style>
