<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="tutor">
          <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="model"
                  clearable
                  use-input
                  hide-selected
                  fill-input
                  input-debounce="0"
                  label="Browse Tutor"
                  :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 Tutors</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>
            <q-card class="q-my-md" v-for="tutor in 4" :key="tutor">
              <q-card-section>
                <div class="row">
                  <div class="col-2 col-md-2 col-sm-12 col-xs-12 flex flex-center q-pa-none">
                    <q-avatar style="width: 140px;height: 140px;">
                      <img :src="'statics/'+ photo[tutor]" alt="Tutor profile photo" />
                    </q-avatar>
                  </div>
                  <div class="col-8 col-md-8 col-sm-12 col-xs-12 q-pa-sm">
                    <div class="column">
                      <div class="text-h6 text-grey-9 text-bold row flex items-center flex-center">
                        <div class="text-h6">Asim Khan</div>
                        <div class="text-caption q-pa-md">( MBBS, FCPS )</div>
                        <q-icon color="secondary" class="q-pl-sm" dense size="sm" name="videocam" />
                        <q-icon class="text-grey-5 q-pl-lg" size="sm" name="location_on" />
                        <img
                          class="q-ml-md"
                          style="width:28px;"
                          src="statics/flags/32/pakistan.png"
                          alt="country flag"
                        />

                        <span class="text-caption text-grey-6 q-pl-md row">
                          <q-icon class="text-grey-5 q-pr-md" size="sm" name="schedule" />Available:
                          <strong class="text-grey-9">Sunday, Friday, Saturday</strong>
                        </span>
                      </div>

                      <div
                        class="text-body1 text-grey-8 q-my-md"
                      >Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae doloribus quidem nobis atque veritatis unde illum in nihil repudiandae. Ad illum pariatur commodi doloremque expedita quod odit tenetur omnis ipsam?</div>
                      <div class="list">
                        <ul>
                          <li v-for="n in 5" :key="n">
                            <q-badge
                              class="q-pa-sm"
                              color="grey-3"
                              text-color="grey-8"
                            >{{topics[n]}}</q-badge>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                  <div class="col-2 col-md-2 col-sm-12 col-xs-12 text-center">
                    <div style="border:1px solid #04b1ed" class="text-center q-pa-sm q-ma-md">
                      <div class="text-h3 text-bold text-grey-5">$ 15</div>
                      <div class="text-h6 text-grey-8 text-uppercase">Per Hour</div>
                    </div>
                    <q-btn color="primary" label="View Profile" to="/tutor/details" />
                  </div>
                </div>
              </q-card-section>
            </q-card>
            <q-card>
              <q-card-section>
                <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 = [
  "photo1.jpg",
  "photo2.jpg",
  "photo3.jpg",
  "photo4.jpg",
  "photo5.jpg",
  "photo6.jpg",
  "photo7.jpg",
  "photo8.jpg",
  "photo9.jpg",
  "photo10.jpg",
  "photo11.jpg",
  "photo12.jpg"
];


export default {
  data() {
    return {
      searchFilter: "tutor",
      filters: true,
      right: false,
      current: 3,
      model: 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;
}

a {
  text-decoration: none;
  color: #04b1ed;
  font-weight: 400;
}
.list ul {
  list-style: none;
}
.list ul li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.list ul li:not(:last-child):after {
  content: "\27A4";
  color: #04b1ed;
  font-size: 14px;
  padding: 10px 5px;
}

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

  .show {
    display: none;
  }
}

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