<template>
  <v-navigation-drawer v-model="xdrawer" fixed app right temporary :width="drawerHeight">
    
      <v-list two-line>
          <template v-for="(item, index) in items">
            <v-subheader
                v-bind:key="item.id"
                v-if="item.header"
            >
              {{ item.header }}
            </v-subheader>

            

            <template v-for="(itm, idx) in item.items">
                <v-list-tile
                    :key="itm.id"
                    avatar
                    >
                    <v-list-tile-avatar>
                        <img :src="itm.avatar">
                    </v-list-tile-avatar>

                    <v-list-tile-content>
                        <v-list-tile-title v-html="itm.title"></v-list-tile-title>
                        
                        <v-list-tile-sub-title v-html="itm.subtitle"></v-list-tile-sub-title>
                    </v-list-tile-content>

                    <v-list-tile-action v-if="itm.date">
                        
                            {{ itm.date }}
                        
                    </v-list-tile-action>

                    
                </v-list-tile>
                <v-divider
                    :key="itm.id+50000"
                    :inset="true"
                    ></v-divider>
            </template>
            
          </template>
        </v-list>
    
  </v-navigation-drawer>
</template>


<script>
module.exports = {
    data () {
        return {
            items: 
            [
                { 
                    // header: 'Today' ,
                    items : [
                        {
                            avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
                            title: 'Brunch this weekend?',
                            subtitle: "<span class='text--primary'>Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?",
                            date: '15 mins'
                            ,id : 0 
                        },
                        
                        {
                            avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
                            title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
                            subtitle: "<span class='text--primary'>to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend.",
                            date: '30 mins'
                            ,id : 1 
                        },
                        
                        {
                            avatar: 'https://cdn.vuetifyjs.com/images/lists/3.jpg',
                            title: 'Oui oui',
                            subtitle: "<span class='text--primary'>Sandra Adams</span> &mdash; Do you have Paris recommendations? Have you ever been?",
                            date: '45 mins'
                            ,id : 2 
                        }
                    ]   
                },

                { 
                    // header: 'Yesterday' ,
                    items : [
                        {
                            avatar: 'https://cdn.vuetifyjs.com/images/lists/1.jpg',
                            title: 'Brunch this weekend?',
                            subtitle: "<span class='text--primary'>Ali Connors</span> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to hang out?",
                            date: '1 day'
                            ,id : 3 
                        },
                        
                        {
                            avatar: 'https://cdn.vuetifyjs.com/images/lists/2.jpg',
                            title: 'Summer BBQ <span class="grey--text text--lighten-1">4</span>',
                            subtitle: "<span class='text--primary'>to Alex, Scott, Jennifer</span> &mdash; Wish I could come, but I'm out of town this weekend.",
                            date: '2 day'
                            ,id : 4 
                        }
                    ]   
                }
            ]
        }
    },
  props: {
    drawer: Boolean
  },

  computed : {
     drawerHeight() {
        if (this.$vuetify.breakpoint.smAndDown) {
           return "300px"
        }
        return "500px"
     },
     xdrawer: {
        get() {
           return this.drawer
        },
        set(v) {
           this.$emit("togleDrawer")
        }
     }
  },

  mounted () {
    
  },

  methods : {
    
  }
}
</script>
