<template>
  <q-list class="q-my-md">
    <q-item class="q-mt-md">
      <q-item-section>
        <q-item-label caption>Show</q-item-label>
        <q-select standout v-model="display" :options="display_options"/>
      </q-item-section>
    </q-item>
    <q-item>
      <q-item-section>
        <q-item-label caption>Category</q-item-label>
        <q-select standout v-model="category_filter" :options="category_options"/>
      </q-item-section>
    </q-item>
    <q-item>
      <q-item-section>
        <q-item-label caption>Filters</q-item-label>
        <q-option-group :options="filter_options" type="checkbox" v-model="filters"/>
      </q-item-section>
    </q-item>
    <q-item class="q-my-md">
      <q-item-section>
        <div class="row q-gutter-sm">
          <div class="col">
            <q-btn outline color="secondary" class="full-width">Apply</q-btn>
          </div>
          <div class="col">
            <q-btn flat class="full-width bg-grey-3">Reset</q-btn>
          </div>
        </div>
      </q-item-section>
    </q-item>
  </q-list>
</template>

<script>
export default {
  // name: 'ComponentName',
  data() {
    return {
      display: "Recently updated",
      display_options: [
        { label: "Recently updated", value: "recent" },
        { label: "Popular", value: "popular" },
        { label: "Featured", value: "featured" }
      ],
      category_filter: "All",
      category_options: [{ label: "Zero Waste", value: "zerowaste" }],
      filters: [],
      filter_options: [
        { label: "Featured", value: "featured" },
        {
          label: "Has downloads",
          value: "download"
        }
      ]
    };
  }
};
</script>

<style>
</style>