<template>
<v-container
  fluid
>
  <v-row
    align="center"
    justify="center"
    class="flex-column"
  >
    <v-col
      cols="12"
    >
      <div class="list-wrap">
        <div class="list-action">
          <v-spacer></v-spacer>
          <v-btn
            depressed
            color="primary"
            dark
            @click="New"
            class="mr-2"
          >
            New
          </v-btn>
          <v-btn
            depressed
            @click="deleteItem(item)"
          >
            Delete
          </v-btn>
        </div>
        <div class="list-header">
          <div class="total mr-5">Total: 2</div>
          <div class="form-search">
            <v-text-field
              v-model="search"
              append-icon="mdi-magnify"
              label="Keyword"
              single-line
              outlined
              dense
              hide-details
              class="mt-0 pt-0"
            ></v-text-field>
          </div>
          <v-spacer></v-spacer>
          <div class="list-control">
            <v-menu offset-y class="btn-download">
              <template v-slot:activator="{ on, attrs }">
                <v-btn
                  icon
                  v-bind="attrs"
                  v-on="on"
                >
                  <v-icon>mdi-download-box</v-icon>
                </v-btn>
              </template>
              <v-list>
                <v-list-item>
                  <v-list-item-title>Excel</v-list-item-title>
                </v-list-item>
                <v-list-item>
                  <v-list-item-title>PDF</v-list-item-title>
                </v-list-item>
              </v-list>
            </v-menu>

            <v-btn icon class="btn-printer">
              <v-icon>mdi-printer</v-icon>
            </v-btn>
          </div>
        </div>
        <div class="list-body">
          <v-data-table
            :headers="headers"
            :items="faq"
            item-key="title"
            sort-by="title"
            group-by="category"
            class="elevation-1"
            show-group-by
          ></v-data-table>
        </div>
      </div>
    </v-col>
  </v-row>
</v-container>
</template>


<script>
  export default {
    name: 'ManagementFAQ',

    data () {
      return {
        headers: [
          { text: 'Category', align: 'start', value: 'category', },
          { text: 'Title', value: 'title', groupable: false, },
          { text: 'Description', value: 'answer', groupable: false, },
        ],
        faq: [
          {
            title: 'title1',
            category: 'Member',
            answer: 'answer description',
          },
          {
            title: 'title2',
            category: 'WIMS',
            answer: 'answer description',
          },
        ],
      }
    },
  }
</script>
